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

Posted by mrx3
mrx3
8,742 Points

Trying to get my navigation bar to appear below my header.

Hello, I'm having some trouble trying to get my navigation bar to appear below my header. I have white space between my header and my navigation, I would like it to appear without the whitespace. My html code is below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Michael James | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <h1>Michael James | Designer</h1>
      <nav class="nav">
        <ul>
          <li><a>Portfolio</a></li>
          <li><a>About</a></li>
          <li><a>Contact</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>
mrx3
mrx3
8,742 Points

This is my CSS code below, Thanks in advance for any help you can give me.

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

.container {
  width: 960px;
  margin: 0 auto;
}

h1{
  font: 2em "Palatino Linotype", "Book Antiqua", Palatino, serif;
  text-align:center;
  background-color:coral;
  height: 125px;
}

.nav { 
    border: 1em solid #ccc; 
    border-width: .1em 0; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color:lightblue;
} 
.nav li { display: inline; } 
.nav a { 
    display: inline-block; 
    padding: .63em; 
    text-decoration: none;
    font-size:1.2em;
}

4 Answers

Tom Lawrence
Tom Lawrence
8,685 Points

its fine, I put all your code in codepen and can see you have a margin on your H1.

Use this:

h1{ font: 2em "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align:center; background-color:coral; height: 125px; margin: 0;}
mrx3
mrx3
8,742 Points

Thanks Tom!!!! That fixed it. So let me make sure I understand this, you set a margin 0 because the H1 had a margin? It works perfect. Thank you again Tom!!!

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

No problem but yes I did, and the best way to work that out is to inspect the page (right click > inspect element)

Then if you hover over the code you will see different colors like blue and green, they mean padding and border and margin, you can see what color is what if you scroll to the very bottom of the little panel on the very bottom right that opened up, and I could see around your H1 you had a margin from that.

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

It will be a margin on the DIV i think, try this; 111 CSS .container { margin: 0 auto; }

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

hmm you have margin on 0 already, is your web page viewable online so we can inspect it?

mrx3
mrx3
8,742 Points

No I don't have it available online, sorry. It's the weirdest thing it's like it's two separate boxes with whitespace between them.