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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Taro Kawada
Taro Kawada
1,486 Points
Posted by Taro Kawada
Taro Kawada
1,486 Points

I'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;


}
Nicolás Barceló
Nicolás Barceló
17,048 Points
Nicolás Barceló
Nicolás Barceló
17,048 Points

Inside ul, please remove the div and put the anchors inside the li elements see code below:

        <nav id="menu">
            <ul >
                <li><a href="index.html">Home</a></li>
                <li><a href="http://blog.tarokawada.com">Blog</a></li>
                <li>Projects</li>
                <li>Social Media</li>
            </ul>
        </nav>

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You'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 lis.

All I did here was rearrange your html to get rid of the divs and moved your a tags inside the li tags. codepen. I left your css completely alone.

Taro Kawada
Taro Kawada
1,486 Points
Taro Kawada
Taro Kawada
1,486 Points

Ok, I solved it immediately after posting the questions.

Turns out I was stupid to put wrap li in divs. Real facepalm moment there.