Centering Dropdown - css

Question

I'm currently learning css and attempting to center the code found here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
I've tried a combination of inline-block and text-align: center, but am unable to center it so "Home", "News", "Dropdown", and "Link" are centered instead of floating towards the left.
Could someone explain what I'm doing wrong? Thank you and hopefully you had a restful weekend!

Answer 1

Since Elements have a float:left property you cannot center them, need to change the css as per needs
Try this new CSS
CSS
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
text-align:center;
}
.container a {
display:inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display:inline-block;
overflow: hidden;
vertical-align:middle;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}