How to center my navbar items? - html

Question

I have been checking on other questions related to mine, and most of the time "text-align:center" is suggested. However, even if I implement it to my code, the navbar still doesn't center... Here's my code:
/* NAVIGATION BAR */
#navigation {
width:1300px;
height:auto;
}
#nav {
width: auto;
}
.ulnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navli {
float:left;
}
.navli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
.navli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.navli.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display:block;
}
.active {
background-color:green;
}
<div id="navigation">
<div id="nav">
<ul class="ulnav">
<li class="navli"><a class="active" href="#home">Home</a></li>
<li class="navli">Link</li>
<li class="dropdown navli">
Dropdown
<div class="dropdown-content">
Droplink 1
Droplink 2
</div>
</li>
<li class="dropdown navli">
Dropdown 2
<div class="dropdown-content">
Droplink 2.1
Droplink 2.2
Droplink 2.3
</div>
</li>
<li class="dropdown navli">
Dropdown 3
<div class="dropdown-content">
Droplink3.1
Droplink3.2
Droplink3.3
</div>
</li>
<li class="navli">Link 2</li>
</ul>
</div>
</div>
Thanks for any suggestions in advance!

Answer 1

remove float:left on your navli class ang set it to display:inline-block and add text-align:center on your #nav, and to center your #navigation add margin:0 auto;
/* NAVIGATION BAR */
#navigation {
width:1300px;
height:auto;
margin : 0 auto;
}
#nav {
width: auto;
text-align : center;
}
.ulnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navli {
/* float:left;*/
display : inline-block;
}
.navli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
.navli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.navli.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display:block;
}
.active {
background-color:green;
}
<div id="navigation">
<div id="nav">
<ul class="ulnav">
<li class="navli"><a class="active" href="#home">Home</a></li>
<li class="navli">Link</li>
<li class="dropdown navli">
Dropdown
<div class="dropdown-content">
Droplink 1
Droplink 2
</div>
</li>
<li class="dropdown navli">
Dropdown 2
<div class="dropdown-content">
Droplink 2.1
Droplink 2.2
Droplink 2.3
</div>
</li>
<li class="dropdown navli">
Dropdown 3
<div class="dropdown-content">
Droplink3.1
Droplink3.2
Droplink3.3
</div>
</li>
<li class="navli">Link 2</li>
</ul>
</div>
</div>

Answer 2

You've used float:left on the li, which aligns them to left. I've removed it and added text-align:center to the ul
Is this what you're looking for?
/* NAVIGATION BAR */
#navigation {
width:1300px;
height:auto;
}
#nav {
width: auto;
}
.ulnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align:center;
}
.navli {
display:inline-block;
}
.navli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
.navli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.navli.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display:block;
}
.active {
background-color:green;
}
<div id="navigation">
<div id="nav">
<ul class="ulnav">
<li class="navli"><a class="active" href="#home">Home</a></li>
<li class="navli">Link</li>
<li class="dropdown navli">
Dropdown
<div class="dropdown-content">
Droplink 1
Droplink 2
</div>
</li>
<li class="dropdown navli">
Dropdown 2
<div class="dropdown-content">
Droplink 2.1
Droplink 2.2
Droplink 2.3
</div>
</li>
<li class="dropdown navli">
Dropdown 3
<div class="dropdown-content">
Droplink3.1
Droplink3.2
Droplink3.3
</div>
</li>
<li class="navli">Link 2</li>
</ul>
</div>
</div>