How to center list items in my navigation bar

Question

I'm having some trouble centering the list items on my website using CSS3, any idea why I cant get the items to center?

Below is a screenshot of my problem: https://gyazo.com/4b68df7e38e71ae320fdb6cb1c0c4e87

Below is the CSS3 and HTML code that I have written for my nav bar:

 .navigation ul { background-color: #A1C9EC; border-style: solid; border-color: #9FABB6; border-width: 1px; } .navigation ul li { display: inline-block; border-style: solid; border-color: #9FABB6; border-width: 1px; border-radius: 5px; padding-left: 1em; padding-right: 1em; background-color: #ffffff; border-top-color: #ffffff; margin: 1em; }

 <!--Wrapper to adjust width of main body on desktop site.--> <div class="wrapper"> <h1>Shane's Portfolio</h1> <!--Navigation Bar (TOP)--> <div class="navigation"> <nav> <ul> <li>Home</li> <li>My Work</li> <li>Qualifications</li> <li>About Me</li> <li>Contact Me</li> </ul> </nav> </div>

Answer 1

text-align: center;

on a wrapper div should do the trick. if you can share the html code it would be easy to give answer

Answer 2

You need to add

text-align: center;
padding-left: 0;

to the .navigation ul { <ul> s have default padding this is why you need to set it to 0 .

(Also I've shortened the navigation list and words just to have the right output if you click on "Run code snipped")

 .navigation ul{ background-color: #A1C9EC; border-style: solid; border-color: #9FABB6; border-width: 1px; text-align: center; padding-left: 0; } .navigation ul li { display: inline-block; border-style: solid; border-color: #9FABB6; border-width: 1px; border-radius: 5px; padding-left: 1em; padding-right: 1em; background-color: #ffffff; border-top-color: #ffffff; margin: 1em; }

 <div class="wrapper"> <h1>Shane's Portfolio</h1> <!--Navigation Bar (TOP)--> <div class="navigation"> <nav> <ul> <li>Home</li> <li>My</li> <li>Qua</li> </ul> </nav> </div> </div>