Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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;
}

Could you post your HTML as well?

3 Answers

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>

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

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;
  }




}

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

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!

Developer tools are your friend! :)