Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Colin K
Colin K
3,417 Points
Posted by Colin K
Colin K
3,417 Points

My header does not stretch across the page! (please help)

I have just finished the "how to make a website" module.

However, when my website is reduced in size, a gap (white space) appears to the right of my header.

See image >>> gap next to header

Any suggestions?

Here is my code:

/*********************************
GENERAL
**********************************/

body {
  font-family: 'Bree Serif', serif;
}

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/*********************************
HEADING
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;

}

#logo {
  text-align: center; 
  margin: 0;
}

h1 {
  font-family: 'Corben', cursive;
  margin: 15px 0;
  font-size: 1.75em;
  line-height: 0.8em;
}

h2 {
  font-size: 0.95em;
  margin -5px 0 0;
  font-weight: normal;
}

/*********************************
NAVIGATION
**********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/*********************************
Footer
**********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc
}

.social-icon {
  width 20px;
  height: 20px;
  margin: 0 5px;
} 


/*********************************
PAGE: PORTFOLIO
**********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #fff;
  color: #fff;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.90em;
  color: #1d754d;
}


/*********************************
PAGE: ABOUT
**********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px; 
  border-radius: 100%;
}

/*********************************
CONTACT
**********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}  

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}


.contact-info li.mail a {
  background-image: url('../img/mail.png');
}


.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


/*********************************
COLORS
**********************************/

/* site body */

body {
  background-color: #fff;
  color: #999;
}

/* red header */
header {
  background: #ff6666;
  border-color: #cd392f;
}

/* nav background on mobile devices */
nav {
  background: #cd392f;
}

/* Logo text */
h1, h2 {
  color: #fff;
}

/* Links */
a {
  color: #33AD33;
}

nav a, nav a:visited {
  color: #fff;
}

/* Selected nav link */
nav a.selected, nav a:hover {
  color: #ffc0cb;
}
Unsubscribed User
Unsubscribed User
5,512 Points

Could you post your HTML as well?

3 Answers

Colin K
Colin K
3,417 Points
Colin K
Colin K
3,417 Points

Sure, 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Colin Knott | Web developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Corben:400,700|Bree+Serif' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Colin Knott</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/image05.jpg">
              <img src="img/image05.jpg" alt="">
              <p>Overlooking the city of Florence at dusk.</p>
            </a>
          </li>
          <li>
            <a href="img/image01.jpg">
              <img src="img/image01.jpg" alt="">
              <p>The moon looming over Hope Valley.</p>
            </a>
          </li>
          <li>
            <a href="img/image02.jpg">
              <img src="img/image02.jpg" alt="">
              <p>The imposing castle keep at Warkworth.</p>
            </a>
          </li>
          <li>
            <a href="img/image03.jpg">
              <img src="img/image03.jpg" alt="">
              <p>The tall ship festival at Greenwich.</p>
            </a>
          </li>
          <li>
            <a href="img/image04.jpg">
              <img src="img/image04.jpg" alt="">
              <p>Steam rises from the ancient Roman Bath at Aquae Sulis.</p>
            </a>
          </li>
          <li>
            <a href="img/image06.jpg">
              <img src="img/image06.jpg" alt="">
              <p>Inside the ruins of Lindisfarne Abbey.</p>
            </a>
          </li>   
        </ul>    
      </section>
      <footer>
        <a href="http://twitter.com/blahblah"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/blahblah"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Colin Knott</p>
      </footer>
    </div>  
  </body>
</html>
Unsubscribed User
Unsubscribed User
5,512 Points

Do you have any styles in the "responsive.css" file?

Colin K
Colin K
3,417 Points
Colin K
Colin K
3,417 Points

Here is my responsive css - thanks for your help!

@media screen and (max-width:479px) { 

#gallery li:nth-child(3) {
   clear: left;
  }
}

@media screen and (min-width:480px) {

  /*********************************
  TWO COLUMN LAYOUT
  **********************************/

  #primary {
    width: 50%;
    float: left;  
  }

  #secondary {
    width: 40%;
    float: right;
  }


  /*********************************
  PAGE: PORTFOLIO
  **********************************/

  #gallery li {
    width: 28.3333%;
  }

   #gallery li:nth-child(4) {
   clear: left;
  }


  /*********************************
  PAGE: ABOUT
  **********************************/

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
}


}

@media screen and (min-width: 660px) {

  /*********************************
  HEADER
  **********************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;    
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;  
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #cd392f;
    margin-bottom: 60px;
  }




}
Unsubscribed User
Unsubscribed User
5,512 Points

I recreated the project and everything is fine on my end? I can only think of a few more things:

  • Have you hard refreshed your browser? For windows, press CTRL+F5 to do this.
  • Make sure your <header> element isn't nested inside of your div#wrapper
  • I see a " margin-right: 5% " on the <nav> element in your responsive.css
Colin K
Colin K
3,417 Points
Colin K
Colin K
3,417 Points

Thanks for your time and suggestions.

I am still getting a white space next to my heading. When my browser is large it is fine - it is only when the window is reduced that the space appears. A scroll bar can be seen at the bottom of the page.

I have just managed to stop the space occuring by reducing the width of the #wrapper to 90%. Although I don't know whether this is a proper fix!

Unsubscribed User
Unsubscribed User
5,512 Points

Developer tools are your friend! :)