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

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
216,136 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

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