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 trialTaro Kawada
1,486 PointsI'm trying to design a website as a project but I have a problem. I can't seem to make my nav to be 'inline-block'.
It works if I add float : left; but I can't center the navigation menu.
my html :
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="greenhead">
<h1>SOMETHING</h1>
<nav id="menu">
<ul >
<div><a href="index.html"><li>Home</li></a></div>
<div><a href="http://blog.tarokawada.com"><li>Blog</li></a></div>
<div><li>Projects</li></div>
<div><li>Social Media</li></div>
</ul>
</nav>
</div>
<div id="whitebar"></div>
</header>
</body>
</html>
css :
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/*Header CSS*/
header {
float: left;
margin: 0 0 30px 0;
width: 100%;
}
#greenhead {
background-color: #2ECC71;
width: auto;
height: 195px;
margin-top: -21px;
padding-top: 10px;
}
#greenhead h1 {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 2.3em;
text-align: center;
padding-top: 0px;
margin-top: 64px;
margin-bottom: 18px;
}
/*---------Navigation ------------*/
nav {
text-align: center;
padding: 10px 0;
margin: 18px 0 0;
}
#menu {
list-style: none;
}
#menu ul li{
display: inline-block;
}
2 Answers
Colin Bell
29,679 PointsYou're wrapping your li
tags in divs. You don't need, or want, to do that.
The direct children for ul
elements should only be li
s.
All I did here was rearrange your html to get rid of the div
s and moved your a
tags inside the li
tags. codepen. I left your css completely alone.
Taro Kawada
1,486 PointsThanks Colin!
Taro Kawada
1,486 PointsOk, I solved it immediately after posting the questions.
Turns out I was stupid to put wrap li in divs. Real facepalm moment there.
Nicolás Barceló
17,048 PointsNicolás Barceló
17,048 PointsInside ul, please remove the div and put the anchors inside the li elements see code below: