Need a full-width horizontal navigation bar

I have the following code to create a horizontal navigation bar however it’s not filling up the full width of the browser like I want it to. What is wrong with my code? There are no anchor tags because the html is created dynamically with javascript and it has a click event to go to the sections. This is for an assignment so it has to be done that way.

<header class="page__header">
    <nav class="navbar__menu">
      <!-- Navigation starts as empty UL that will be populated with JS -->
      <ul id="navbar__list"></ul>

#navbar__list {
list-style-type: none;
color: #FFF;
margin: 0 auto 0 auto;
padding: 0;
position: fixed;
top: 0;
width: 100%;
min-width: 100%;
overflow: auto;

#navbar__list li {
cursor: pointer;
background-color: #dddddd;
color: #000;
padding: 8px;
width: 31%;
border:1px solid #000;
text-align: center;

You could try using width: 100vw (viewport width). It’s hard to know for sure what the issue is without seeing the website, do you have a link to it?

Can I see what your CSS is for .page_header and .navbar_menu? It’s hard to tell what the issue is without the whole picture.

My best guess is somewhere from html to body to header to nav an extra padding/margin slipped in.

position:fixed does some weird things sometimes, but I think this could help:

#navbar__list {
  position: fixed;

I changed the width of the list items from 31% to 32% and now it’s the full width.