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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

kalle oman
kalle oman
1,178 Points

Nav bar dosen't reach all the way

So my nav bar is not filling up the sides and the top to the logo how can i fix this?

My code:

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

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

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

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75m; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -59x 0 0; font-weight: normal; }

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

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

/*************************** FOOTER ****************************/

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

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

/* Site Body */ body { background-color: #fff; color: #999; }

/* Black Header */ header { background: #1c1c1f; border-color: #1c1c1f; }

/* Nav Background On Mobile */ nav { background: #1c1c1f;

}

/* Logo Text */ h1, h2 { color: #ffffff; }

/* Links */ a { color: #ffffff; }

/* Nav Link */ nav a, nav a:visited { color: #ffffff; }

/* Selected Nav Link */ nav a.selected, nav a:hover { color: tomato; }

3 Answers

Belve Marks
Belve Marks
7,332 Points

Could you link or insert both your files? Bracket the code with three back ticks to make it readable. Check out the navbar's styling. You're giving it 20px on top....

kalle oman
kalle oman
1,178 Points

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
  <header>
    <a href="index.html" id="logo">
    <h1>Poor Man's</h1>
    <h2>Drink</h2>
    </a>  
  </header>
  <div id="wrapper">  
  <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>  
    <section>
      <ul id="gallery">
        <li>
        <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt="">
        </a>
        </li>
        <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          </a>
        </li>
        <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          </a>
        </li>
        <li>
        <a href="img/numvers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          </a>
        </li>
        <li>
        <a href="numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          </a>
        </li>
      </ul>  
    </section>

    <footer>
      <ul>
        <li>
          <a href="https://www.facebook.com/">
            <img src="img/facebook-wrap.png" alt="">
          </a>
        </li>

        <li>
          <a href="https://twitter.com/">
            <img src="img/twitter-wrap.png" alt="">
          </a>
        </li>

      </ul>

      <small>&copy; Poor Man's Drink 2016</small>

    </footer>  
    </div>
  </body>

</html>

css:

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

body {
  font-family: 'Open Sans', sans-serif;
}

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

a {
  text-decoration: none; 
}

img {
  max-width: 100%; 
}

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

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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75m;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -59x 0 0;
  font-weight: normal;
} 


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

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



/***************************
FOOTER
****************************/

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



/***************************
PORTFOLIO
****************************/

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

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


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


/* Site Body */
body {
  background-color: #fff;
  color: #999;
}

/* Black Header */
header {
  background: #1c1c1f;
  border-color: #1c1c1f;
}

/* Nav Background On Mobile */
nav {
  background: #1c1c1f;

}

/* Logo Text */
h1, h2 {
  color: #ffffff; 
}

/* Links */
a {
  color: #ffffff; 
}

/* Nav Link */
nav a, nav a:visited {
  color: #ffffff; 
}

/* Selected Nav Link */
nav a.selected, nav a:hover {
  color: tomato; 
}
Belve Marks
Belve Marks
7,332 Points

Check out the parent's styling too. The navbar is inside the wrapper, thus is inheriting the wrappers styling. Specifically, the wrapper is binding everything within it to a specific width. Guil covers how to make these look good in one of the CSS videos.

In the meantime, you can always play around with the developer tools (ctrl+shift+i on windows chrome).

kalle oman
kalle oman
1,178 Points

I have seen that CSS Video about how to fix it and it didn't work so i downloaded the project files and took his code and still the same problem.