Hi. I’m a total newbie to HTML, and I’m currently trying to center a nav bar that I made, but I can’t. I tried to text-align: center; but to no avail. Here are my CSS and HTML codes:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #3399ff;
}
p {
color: white;
}
What am I doing wrong?
Remove the center element and nest the sidebar in a div with the “text-center” class. Change the li a { CSS to li {. You should avoid using the center element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Thanks for your help! But there’s another problem now. The text is vertically centered, not horizontally. 
Are you using Codepen? I punched your code into a new pen and it seems to work for me: https://codepen.io/hhhhhhhhhhhhhhhy/pen/jGEOQX
I compared our codes, and they’re the same. Yet, the text is still vertically centered. There must be something I’m doing wrong.
Have you accidentally nested the navbar stuff inside of something else whose attributes are messing it up? I’ve been stumped by issues before where I’ve been unable to identify what’s wrong with my code and it turns out being a tag I forgot to close or something somewhere. Try putting your navbar at the very top of your HTML and see if that makes a difference. I’m still new too but if you want to link me to your project I could take a look at it. I just finished my portfolio page so navbar difficulties are still fresh for me. 
