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 trialHenry Morrow
19,425 PointsWhen 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;}
Henry Morrow
19,425 PointsSure! 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>© 2015 Henry Morrow</p>
</footer>
</body>
</html>
1 Answer
Henry Morrow
19,425 PointsActually 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
22,805 PointsLol. No worries man :) Do you know exactly what was causing the issue before the adding was applied?
Liam Maclachlan
22,805 PointsLiam Maclachlan
22,805 PointsHey man, Can you paste your html, too? :)