Trouble centering Wordpress header elements with _s starter theme

My apologies if I'm missing something obvious here, but I'm having trouble centering my header elements.

I'm styling the elements within the header in #site-navigation so that I can use a background-color attribute that stretches to 100% of the width in #masthead without being cutoff.

To give you an idea, my logo and links are currently aligned left, however I'm not sure why.

Here is my code:

HTML

<header id="masthead" class="site-header">
    <nav id="site-navigation" class="main-navigation">
        <a href="#"><!-- code for logo svg --></a>
        <span id="list-container"><!-- code for links (primary menu) --></span>
    </nav>
</header>

CSS

#masthead {
  background-color: #efefef;
  height: 100px;
  margin: -100px auto;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#site-navigation {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 95%;
}

In the _s (underscores) Wordpress starter theme, the class .main-navigation has the attribute float: left. So I used float: none in my header class to centre it.