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


I can't get my navigation bar to display inline. Any advice/help would be much appreciated.


I can't seem to get my navigation to display inline. The navigation links are stacked on top of each other instead of side by side. Below is both my html and css. Any help would be much appreciated. Thanks!

HTML: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Best Of Boise</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div>

  <header class="main-header">
    <div class="container clearfix">
      <h1 class="name"><a href="#">Best of Boise</a></h1>
      <ul class="main-nav">
        <li><a href="#"</a>Food</li>
        <li><a href="#"</a>Outdoor Life</li>
        <li><a href="#"</a>Living</li>
        <li><a href="#"</a>This week in Boise</li>
  </header> <!-- .main-header -->

  <div class="banner">
      <div class="container clearfix">
      <h1 class="headline">The Best City</h1>
      <span class="tagline"><a href="#">Best City For Raising A Family</a></span>
  </div> <!-- .banner -->


/* ================================= Base Element Styles ==================================== */

  • { box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.8em; }

a { text-decoration: none; }

h2, a { color: #093a58; }

ul { list-style-type: none; padding: 0; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name a, .main-nav a { display: block; text-align: center; padding: 2px 0; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Banner ---- */

.banner, .main-footer { text-align: center; }

.banner { color: #fff; background: #3acec2; padding: 3.2em 0; margin-bottom: 60px; }

.container { width: 80%; margin: 0 auto; }

.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.main-header { position: fixed; background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,.4); width: 100%; top: 0; z-index: 1000; }

.banner { padding-top: 300px; height: 500px; }

.container { width: 90%; margin: 0 auto; }

.name, .col { float: left; padding-left: 15px; padding-right: 15px; }

.main-nav { float: right; }

.main-nav li { display: inline-block; margin-left: 40px; }

.primary, .tertiary { width: 30%; }

.secondary { width: 40%; }

.clearfix::after { content: " "; display: table; clear: both; }


1 Answer

Hi Cody,

Your are floating the unordered list with the class of main-nav to the left which is all good but to get the list items inside of it displayed on one line you have to do the same thing:

main-nav li {
 display: inline-block;
 margin-left: 40px; 
 float: left; /* will push the first item all the way to the left */

To prevent the ul from collapsing you have to add the clearfix to it.

Hope this is helpful