Create Your First HTML/CSS Project display: inline-block not working

For the exercise “Creating your first HTML/CSS prject”.
I am having trouble getting the “display: inline-block” to align the navbar across the top of the page in chrome. It currently is aligning the list items on the left. Any suggestion on why my code below isnt doing that?

<!-- Nav bar section -->
<nav class="navbar">
    <UL>
        <li><a class="blue" href="">Gritty-ify</a></li>
        <li><a href="">Gritty Landing Banner</a></li>
        <li><a href="">Gritter</a></li>  
    </UL>
</nav>

.navbar {
background-color: white;
position: fixed;
top: 0;
width: 100px;
}

.navbar li {
display: inline-block;
padding: 0px 20px;
}

.navbar a {
text-decoration: none;
color: black;
}

.banner {
background-color: #4d00ff;
color: white;
margin-top: 50px;
text-align: center;
padding: 50px 0;
}

#small-gritty {
height: 150px;
width: 125px;
filter: drop-shadow(1px 1px 1px black);

}

.gritter-section {
padding: 20px 50px;
}

#gritter {
color: rebeccapurple;
font-size: 100px;
}

#greets ul {
list-style-type: none;
}

.avatar {
background-image: url(…/images/headshot.jpg);
background-size: cover;
height: 50px;
width: 50px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}

.bold {
font-weight: 900px;
}

a.blue {
color: blue;
}

Hello,

100px isn’t much for the width of a navbar. Try 100%, just to check.

1 Like

Yep, that was it. I should have been 100% not 100px. Thanks for the help.

2 Likes