Hey there! I recently added a bottom navigation bar to my website using HTML and CSS code. However, I'm having trouble centering it at the bottom of the page. Any suggestions or solutions would be greatly appreciated. Attached are screenshots of the HTML, CSS codes, and the current position of the navigation bar on the left-hand side of the webpage. Thank you in advance for your help!
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
<div class="navbar">
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Facebook Page</a>
</div>
HTML navbar code
CSS navbar code
webpage navbar