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

Joshua Comrie
Joshua Comrie
3,861 Points
Posted by Joshua Comrie
Joshua Comrie
3,861 Points

Why won't my nav bar <a> tags centre?

Hi. I'm doing a project for college. I am somewhat fluent in HTML & CSS. I have being doing it a couple of months. Can anyone explain this code and why my top nav bar anchors won't centre? I've being trying all sorts and can't seem to get it to work! Thanks

<!DOCTYPE html>
<html>
<head>
    <title>Home | How to create a web page </title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <meta name="viewport" content="width=device-width", initial-scale=1.0">
</head>
<body>
        <div id="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Design Section</a></li>
        <li><a href="">Create Section</a></li>
        <li><a href="">Legal Requirments</a></li>
        <li><a href="">Publishing</a></li>
        <li><a href="">Contact</a></li>
    </ul><br>
    <h1>How to create a web page from start to finish</h1>
    <p>
        Ever wanted to create your own website? Then you've come to the right place!<br>
        Here you will find:
    </p>
    <ul class="list2">
        <li>Design Techniques</li>
        <li>Info On Contructing Websites</li>
        <li>Legal Requirments You Need Know</li>
        <li>How To Publish A Webpage</li>
    </ul>
    <p>There is also a contact section on how to contact the website designer!</p>
    <footer>How To Create A Web Page &copy; 2018</footer>
</div>
</body>
</html>

body{
    background-color: #e6ffcc;
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: none;
    margin-top: none;
    padding: 0;
    margin:0;
}
#nav {
    font-size: 20px;
    font-weight: bold;
    background-color: #66cc00;
    height: 65px;
    max-width: 100%;
    border-bottom: solid black 2px;
    text-align: center;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav li {   
    float: left;
    padding: 30px;
}
#nav a {
    color: white;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    display: inline;
    border-radius: 10px 10px 0px 0px;
    vertical-align: middle;

}
#nav a:hover {
    background-color: #e6ffcc;
    color: black;
}
h1{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
p{
    text-align: center;
}
.list2{
    list-style-type: square;
    display: grid;
    text-align: center;
}
footer{
    color: white;
    height: 40px;
    border-top: solid black 2px;
    text-align: center;
    padding: 25px;
    background-color: #66cc00;
    max-width: 100%;
    padding: 20px;
}

1 Answer

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hey Joshua,

This is happening because you're floating the li elements to the left so the text-align: center that you have on #nav isn't going to do anything. Instead, try replacing that float: left; on the #nav li with display: inline-block; and that should move right into the center for you.

Joshua Comrie
Joshua Comrie
3,861 Points
Joshua Comrie
Joshua Comrie
3,861 Points

Thanks a lot Tim. Just tried it now and it works fine. Can't believe it was something so obvious! aha