I cannot center my header in the middle - html

Question

I'm trying to get my header with ul in the center. Another page suggested having overflow:hidden but when I shrink the window, a second scroll bar still appears.
Every time I try something, the li isn't in line with my logo.
Also tried to have the class 'container' margin: auto but nothing happens.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 10px 0;
float: left;
}
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
/* half the logo width */
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
/* half the logo width */
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<div class="container">
<nav>
<ul>
<span>
<li class="current"> Home</li>
<li> Photography</li>
</span>
<div class="center-logo">
<li><img src="https://placehold.it/100x50"></li>
</div>
<span>
<li> Biography</li>
<li> Contact Us</li>
</span>
</ul>
</nav>
</div>
</header>

Answer 1

The Issue
float rules declared on the list-items (li)
Consider removing the float rules declared on list-items, this will negate any attempt at horizontally center aligning your menu items using typical methods other than flex-box.
The Fix
text-align: center (on containing element)
display: inline-block (on nested elements to center)
Since there is text-align: center rule already declared on a containing parent element (header in this case), and the list-items have already been declared as inline-block items, the list-item elements will center after removing the float rules declared on them.
Further Concerns:
The only direct descendant elements of an unordered (ul) or ordered (ol) list should be list-items (li) - any element other than this would be considered invalid markup.
Code Snippet Demonstration: (view "Full Page")
Summary:
Markup cleaned/simplified
Invalid list elements removed (direct descendants)
Styles improved (omitting redundant rules, vertically centering
navigation)
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 0 0; /* remove the bottom padding */
/* float removed */
vertical-align: middle; /* additional */
}
/* Additional */
li.logo {
padding-left: 50px;
padding-right: 50px;
}
header nav > ul { /* using the "child combinator" here (>) so that this rule doesn't apply to any dropdown or sub-menus */
padding: 10px 0 10px 0;
}
/*
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
}
*/
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<nav>
<ul>
<li class="current"> Home</li>
<li> Photography</li>
<li class="logo"><img src="https://placehold.it/100x50"></li>
<li> Biography</li>
<li> Contact Us</li>
</ul>
</nav>
</header>
<!--
Change Log:
1) Invalid nested elements removed from list (span & div)
2) Superfluous ".container" containing element removed (as providing no tangible benefits)
-->
Practical Demonstrations for Further Reference:
Horizontal Alignment (Text Elements)
Horizontal Alignment (Arbitrary Elements)

Answer 2

You could use Flexbox.
header ul {
display:flex
}
header li {
flex: 1
}
Powerful tool flex.
See fiddle: https://jsfiddle.net/fo7v1253/1/