así que estaba haciendo este diseño y no puedo alinear correctamente el encabezado. Quiero mover el botón y dirigirme a los cuadros rojos. Ingrese la descripción de la imagen aquí .
El código es el siguiente:
<div class="main"> <div class="header"> <h1 class="notes__title">Notes</h1> <button class="notes__create">Create</button> </div> <div class="notes"> <div class="note"> <h3 class="note__title">Note Title</h3> <div class="note__body">Text....</div> </div> </div>y el CSS
.main { display: flex; width: 100%; align-items: center; flex-direction: column; } .header { display: flex; width: 100%; justify-content: space-around; align-items: center; margin: 10px 0px; } .notes__title { color: #fff; } .notes { max-width: 1200px; margin: 0 auto; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }por favor ayuda
Está utilizando el espacio alrededor, que es lo que causa el efecto que está viendo.
Probar:
.header { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 10px 0px; }.header { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 10px 0px; max-width: 1200px; }ok, hice esto y funcionó, aunque no estoy contento con la solución, quería lograrlo solo con Flex Box #
.main { max-width: 960px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; min-height: 100vh; } .header { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 10px 0px; }