Cuando aplico márgenes a mi etiqueta principal en un intento de que aparezca debajo del encabezado, mueve toda la página hacia abajo, no solo la sección principal. ¿Por qué la sección principal no aparece debajo del encabezado?

He intentado usar divs y etiquetas HTML semánticas.

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #222;
}

header {
  text-align: center;
  width: 100%;
}

header h1 {
  float: left;
}

nav {
  margin: 25px 25px;
  float: left;
}

nav ul {
  margin: -17px 0 0 15px;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding: 5px;
}

nav ul li a {
  text-decoration: none;
}

.nav-button {
  float: right;
  margin-top: 10px;
  margin-right: 5px;
}

.nav-button a {
  color: #fff;
  text-decoration: none;
}

main {
  margin-top: 20px;
}

.container {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.banner {
  margin-top: 50px;
}
<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
      </ul>
    </nav>
    <button class="button-primary nav-button"><a href="#">Button</a></button>
  </header>
  <main>
    <div class="container">
      <div class="banner">
        <h1>Welcome to A Website</h1>
        <p>Simple subheading</p>
      </div>
    </div>
  </main>
</body>

Espero la sección principal, p. Ej. el banner que contiene <h1>Welcome to A Website</h1> y <p>Simple subheading</p>

Se mostrará debajo de la sección del encabezado, sin embargo, se muestra en el centro de h1 / nav y el botón La aplicación de un margen al banner o contenedor hace que toda la página, incluido el encabezado, se mueva hacia abajo.

1
macatwork 27 sep. 2019 a las 12:15

1 respuesta

La mejor respuesta

Lo que creo que es la razón es que los elementos dentro de las etiquetas de su encabezado son más grandes que su contenedor.

Entonces, lo que puede probar son las siguientes alternativas:

Prueba 1:

Dale a tu header una altura particular para que el div main pueda quedar debajo de ella:

header
{
 height: 110px ; /* Approx */
}

Prueba 2:

Agregue margin-top a la etiqueta main

 main
{
 margin-top: 7% ; /* Approx */
}

Esto puede darle el resultado esperado.

0
Bunty Sharma 27 sep. 2019 a las 09:46