How do I center the navigation bar “buttons”?

Question

I'm making a website for fun and want to center my navigation bar but nothing seems to work. I want the navigation bar full the whole width but have the "buttons" in the middle. And also being responsive, I already tried adding in the css (navbar li): margin-left: 50%. But this isn't what I am looking for, margin-left: auto and margin-right: auto also doesnt work. I tried using display: inline-block and text-align: center; but it doesn't work. Do you have any suggestions?

 .navbar { position: relative; margin-top: -47px; } .navbar ul { width: 99%; list-style-type: none; margin: auto; padding: 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); } .navbar li {} .navbar li a { float: left; color: white; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgba(0, 0, 0, 0.8); } .dropdown-content { display: none; position: absolute; margin-top: 47px; background-color: rgba(0, 0, 0, 0.8); text-align: center; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .active { background-color: rgba(0, 0, 0, 0.8); color: white; } 

 <div class="navbar"> <ul> <li><a class="active" href="index.html">Home</a></li> <li class="dropdown"><a href="bewegingillusie.html">Plans</a> <div class="dropdown-content"> <a href="about_us.html">Route</a> <a href="about_the_website.html">Places I want to go</a> <a href="about_the_website.html">My budget</a> </div> </li> <li class="dropdown"><a href="fotoillusie.html">Journey</a> <div class="dropdown-content"> <a href="about_us.html">South-Africa</a> <a href="about_the_website.html">Thailand</a> <a href="about_the_website.html">Country1</a> <a href="about_the_website.html">Country2</a> <a href="about_the_website.html">Country3</a> <a href="about_the_website.html">Country4</a> </div> </li> <li><a href="kleurillusie.html">Photos</a></li> <li><a href="vormillusie.html">Other websites</a></li> <li class="dropdown"><a href="about.html">About</a></li> </ul> </div> 

Answer 1

Have you tried setting display: flex; on your <ul> ? Then you should be able to add justify-content: center; .

Answer 2

By setting text-align: center; on the .navbar ul and display:inline-block; on .navbar ul , as seen below:

.navbar ul {
     width: 99%;
     list-style-type: none;
     margin: auto;
     padding: 0;
     overflow: hidden;
     background-color: rgba(0,0,0,0.5);
     text-align: center;
 }

 .navbar li {
     display: inline-block;
 }