After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . Any assistance would be greatly appreciated! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
height: inherit;
/* margin: 0; REMOVE THIS*/
margin-bottom: 0; /* Suggested */
list-style-type: none;
text-align: right;
background-color: #000;
}
/* Suggested for aesthetic reasons */
#navbar {
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 4px;
height: inherit;
border-left: 1px #696969;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
border-left:1px solid #696969
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #000;
}
#navbar ul li:hover a {
color: #fff !important;
}
#navbar { background-color: #000; }
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:nth-child(3) a {
border-right: 1px solid #696969;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 15px;
vertical-align: top;
}
.submit-btn {
background-color: green !important;
padding: .2em 1em;
border-left:1px dashed #696969
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul class="container">
<ul>
<li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!-- --><li><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abdbd9c4c1cec8dfebd8dfcedbc3cec5d8cec5ccc2c5ceced9c2c5cc85c8c4c6">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1a3bebbb4b2a591a2a5b4a1b9b4bfa2b4bfb6b8bfb4b4a3b8bfb6ffb2bebc">…