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

Jordy McElroy
Jordy McElroy
2,126 Points
Posted by Jordy McElroy
Jordy McElroy
2,126 Points

Placing nav bar inside the header

Hi! I'm struggling to place my navigation bar inside my header. I want my navigation bar to float right and my header to stay on the left. It would be awesome if anyone can help me understand why my nav bar keeps getting pushed down instead of going in my header. Thank you so much in advance! 

<!DOCTYPE html>

<html>


<head>

 <meta charset="utf-8">
 <title>The MMA Bros</title>
 <link href="style.css" rel="stylesheet" type="text/css">


</head>


<body>

 <header>
  <div class="wrapper">
   <div class="header">
    <h1>The MMA Bros</h1>
  </div>

  <div class="nav">
   <ul>
    <li>Home</li>
    <li>About</li>
    <li>Podcast</li>
   </ul>
  </div>
 </div><!--wrapper-->

 </header>

</body>

</html>

/* GLOBAL */

* {
    margin: 0;
    padding: 0;
}


/* BODY*/

body {
    font-family: sans-serif, arial, helvetica;
    background: #000;
}


/* HEADER */

.wrapper {
    width: 100%;
}

.header {
    background-color: #a8baf1;
    color: #fff;
    height: 100px;
    border-bottom: 2px solid #fff;
}

.header h1 {
    padding-top: 20px;
    padding-left: 25px;
    font-size: 60px;

}

.nav {
    color: #fff;
    float: right;
}

.nav li {
    display: inline;
    padding-right: 25px;
    padding-left: 25px;
    font-size: 25px;
}

2 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You may be getting confused since you have a class named "header" and also a header element. The CSS colors the class light blue, but it's just a container around the h1. It does not include the nav.

And since h1's are block elements the nav section is pushed down below it. And since the header element is constrained to a height of 100 pixels, which is about the size of the h1, the nav section is further out.

Then add the fact that the nav is floated, and that causes the header element along with the "wrapper" to both collapse down to fit tightly around the h1.

So there you have it. Adding this should make things a bit more obvious:

header { overflow: scroll; }

The built-in developer tools in the browser would also help reveal the issue (that's what I used).

Jordy McElroy
Jordy McElroy
2,126 Points
Jordy McElroy
Jordy McElroy
2,126 Points

That helps a lot! I get it now. Thank you, Steven!