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 CSS Layout Techniques Display Modes Inline-Block Formatting

Posted by Henry Morrow
Henry Morrow
19,425 Points

When I switch my display to inline-block, the nav li stack instead of staying horizontal. Why?

When I switch list items from inline to inline-block, they stack on top instead of staying horizontal like the do in the video. Why is this happening? I am only using 2 nav items for the site I'm practicing with.

Here is my code: 

/* Main Styles */

.main-wrapper {
  width: 100%;
}

.main-header {
  padding: 2.5%;
}

.main-logo {
  margin-right: 50px;
}

.main-logo,
.main-nav li {
  padding: 1% 2%;
  border-radius: 5px;
}

.main-nav li {
  margin-right: 10px;
} 

.main-logo,
.main-nav,
.main-nav li {
  display: inline-block;
}

.main-logo a {
  text-align: center;
}


/* Layout Colors */

.main-header {background-color: orange;}
.main-logo {background-color: skyblue;}
.main-nav li {background-color: grey;}
Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man, Can you paste your html, too? :)

Henry Morrow
Henry Morrow
19,425 Points

Sure! Here is my html. 

<!DOCTYPE html>
<html>
<head>
    <title>Henry Morrow | Profile</title>
    <meta charset="UTF-8">
    <meta name="description" content="Welcome to my page! Here you will find my portfolio, and some other general information on me. Thank you for visiting!" />
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
 <!-- <link rel="stylesheet" type="text/css" href="css/grid.css"> -->
  <link rel="stylesheet" type="text/css" href="css/henry.css">

</head>
<body>
    <header class="main-header">
      <div class="grid-container main-wrapper">       
        <h1 class="grid-2 main-logo"><a href="henry.html">Henry Morrow</a></h1>
            <ul class="grid-8 main-nav">
                 <li><a href="#">Portfolio</a></li>
                 <li><a href="#">Bio</a></li>
            </ul>
        </div>
    </header>
    <div class="grid-container">
      <div class="grid-12 primary-content col">
        <h2>Primary Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae euismod est. Sed venenatis mollis orci sit amet hendrerit. Praesent vestibulum sapien odio, nec ultrices velit suscipit non. Cras accumsan ligula nec tellus dignissim feugiat. Praesent eu mi ex. Sed facilisis est sit amet purus finibus sagittis. Proin eu odio aliquam, dictum turpis sed, auctor nibh. Mauris vel ex a libero semper aliquet sit amet a odio.</p>
        </div>
    </div>
  <footer class="main-footer">
    <a href="https://www.facebook.com/henry.morrow1"><img class="facebook" src="img/facebook-wrap.png" alt="Facebook Logo"></a>
    <a href="https://twitter.com/hankmiestro66"><img class="twitter" src="img/twitter-wrap.png" alt="Twitter Logo"></a> 
    <a href="https://instagram.com/honron66/"><img class="instagram" src="img/Glyph_Logo_png.png" alt="Instagram Logo"></a>
    <p>&copy; 2015 Henry Morrow</p>
  </footer>
</body>
</html>

1 Answer

Henry Morrow
Henry Morrow
19,425 Points
Henry Morrow
Henry Morrow
19,425 Points

Actually I figured it out! Thanks for coming to help Liam, I saw that it was an issue that was fixed when I added padding to those list items.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Lol. No worries man :) Do you know exactly what was causing the issue before the adding was applied?