header background not wide enough

Question

Hi, been trying to make a portfolio webpage, as a first project. I'm stuck in trying to make a header whose background color would occupy the whole page (there seems to be a margin or something that I can't find). What am I missing?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Diego Vid Eco</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <div id=wrapper>
  <body>  
      <header>
        <h1>Diego Vid Eco</h1>
        <h2>Compositor</h2>
        <nav>
          <ul>
          <a href="index.html"><li class= "selected">Dossier</li></a>
          <a href="acerca.html"><li>Acerca</li></a>
          <a href="contacto.html"><li>Contacto</li></a>
          </ul>
        </nav>
      </header>
        <section class="cita">
          <p>“Lograr una comprensión más plena de la experiencia [y de] la forma en que creamos el mundo o los objetos de este mundo y nos relacionamos con ellos... Se trata de algo así como una ecología del pensamiento (por oposición a una eco‐nomía), no de esforzarse por imponer sobre el mundo algo más allá de sus posibilidades, desatentamente (e.g. el supuesto crecimiento ilimitado del capitalismo), sino de crear con el mundo‐pensamiento partiendo de sus posibilidades. No se trata tampoco de una renuncia que pretenda decir que “las cosas son así, y no pueden ser diferentes”, sino por el contrario del descubrimiento‐reconocimiento de todo lo que pueden ser; y esto es (no)paradójicamente algo más eficiente y “económico” que la economía misma, pues actúa en diálogo con el logos: con las formas de ha‐ser del pensamiento‐mundo.”
          </p>
          <p class="autor">
            ‐Diego Villaseñor, Una exploración del pensamiento (2013), pg. 227‐228.
          </p>
        </section>
        <section>
        <ul class="gallery group">
          <li>
            <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141469585&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
            <h3>Por las marcas de la cueva</h3> <p>Música acusmática espacializada, duración abierta. <a href="por-las-marcas-de-la-cueva.html">Leer más.</a></p>
          </li>
          <li>
            <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141450360&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
            <h3>Espíritu Penetrando en Árbol</h3> <p>Música fenomenológica. Versión para voz y cinta (original para flauta). <a href="espiritu-penetrando-en-arbol.html" class="mas">Leer más.</a></p>
          </li>
          <li>
            <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141441686&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
            <h3>21 Nubes</h3> <p>Del ciclo "Retratos de la gente que amo" (2013-), una serie de obras modulares y superponibles. Versión para quinteto de alientos (original para piano). <a href="21-nubes.html" class="mas">Leer más.</a></p>
          </li>
          <li>
            <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/163205489&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
            <h3>Redwood Region</h3> <p>Transcripción, traducción y reinterpretación de los sonidos de un bosque. En co-autoría con Christopher Luna. <a href="redwood-region.html" class="mas">Leer más.</a></p>
          </li>
        </ul>
      </section>
      <footer>
        <p>&copy; Diego Villase&ntilde;or de Cortina 2015</p>
      </footer>
  </body>
  </div>
</html>

/*===============
     GENERAL
================*/

/*
font-family {

 }
*/


a {
  text-decoration: none;
}

iframe {
  width: 100%;
  height: 300px;
}

* {
box-sizing: border-box;
}  


/*===============
     FONT
================*/

h1 {
 font-size: 2.1em;
}

p {
  font-size: 1.2em;
  color: white;
}

a {
  color: white;
  font-size: 1.7em;
  font-weight: 800
}

/*===============
     BODY
================*/

#wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 5%;
}

body {
 background-image: radial-gradient(#598839, #598838);
}


/*===============
     Header
================*/
header {
  background: black;
  max-width: 100%;
}

h1,
h2 {
  float: left;
  text-align: center;
  width: 100%;
  color: grey;
}

/*===============
     Navigation
================*/

nav {
 text-align: center;
 padding: 10px 0;
 margin: 5px 0;
 max-width: 100%;
}

nav ul {
 list-style: none;
}

nav li {
  display: inline-block;
  padding: 2%;
}

/*===============
     CITA
================*/

.cita {
  max-width: 100%;
  text-align: center;
}

.autor {
/*  max-width: 85%;*/
  text-align: right;
}


/*===============
     GALLERY
================*/

.gallery {
  margin:0;
  padding: 0;
  list-style: none;
/*  overflow: auto;*/


}

.gallery li {
  max-width: 40%;
  max-height: 40%;
  padding-bottom: 1%;
  margin: 1% 4%;
  float: left;
}

.mas{
  font-size: 1.2em
}
/*===============
  FLOAT CLEARFIX
================*/

.group {
  content: "";
  display:table;
  clear: both;
}



/*===============
  MEDIA QUERIES
================*/

@media (min-width: 1400px) {
  #wrapper {
    max-width: 100%;
  }
  .gallery li {
    max-width:23%;
    padding: 1.5%;
    margin: 0.5%;

  }
}

@media (max-width: 480px) {
  .gallery li {
    max-width:90%;
    padding: 7%;
    margin: 3%;

  }

  .cita,
  .autor {
    display: none;
  }
}

Thanks in advance!

Answer 1 · 2015-01-21T20:41:56Z

January 21, 2015 8:41pm

You have your header inside your wrapper ID and it's set to a max width of 960px :)

I would take the header out of the #wrapper and break it into 2 parts.

<html>
  <head>
    <meta charset="utf-8">
    <title>Diego Vid Eco</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <div id=headerWrapper>
  <body>  
      <header>
        <h1>Diego Vid Eco</h1>
        <h2>Compositor</h2>
        <nav>
          <ul>
          <a href="index.html"><li class= "selected">Dossier</li></a>
          <a href="acerca.html"><li>Acerca</li></a>
          <a href="contacto.html"><li>Contacto</li></a>
          </ul>
        </nav>
      </header>
    </div>
    <div id=wrapper>
        <section class="cita">
          <p>âLograr una comprensiÃ³n mÃ¡s plena de la experiencia [y de] la forma en que creamos el mundo o los ob....

/*===============
     BODY
================*/

#headerWrapper {
  width: 100%;
}

#wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 5%;
}

Answer 2 · 2015-01-22T01:17:10Z

January 22, 2015 1:17am

Thanks man, that does it!

Answer 3 · 2015-01-22T01:35:35Z

January 22, 2015 1:35am

Awesome :)

Welcome to the Treehouse Community

Looking to learn something new?

Diego Villaseñor

Diego Villaseñor

header background not wide enough

3 Answers

Shawn Denham

Shawn Denham

Diego Villaseñor

Diego Villaseñor

Shawn Denham

Shawn Denham