Центральная панель навигации css с позицией: исправлена

У меня есть навигационная панель с position:fixed, но когда я прокручиваю страницу вниз, она не центрируется. Ширина составляет 90%, а высота автоматически. Я включил то, что у меня есть сейчас, но это не работает. Есть идеи?

.sticky {
  position: fixed;
  width: 90%;
  height:auto;
  top: 0;
  right:0;
  left:0;
  margin: 0 auto;
}


<script>
        
        window.onscroll = function() {myFunction()};

        
        var navbar = document.getElementById("navbar");

        
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          } else {
            navbar.classList.remove("sticky");
          }
        }
    </script>

вот HTML, используемый для создания панели навигации

    <nav class = "navbar navbar-inverse" style = "background-color:#3A9DFA; width:80%">
  <div class = "container-fluid" id = "navbar">
    <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#myNavbar">
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>
        <span class = "icon-bar"></span>                        
      </button>
      <a class = "navbar-brand" href = "index.html"  style = "color:#ffffcc">Music Moves</a>
    </div>
    <div class = "collapse navbar-collapse" id = "myNavbar">
      <ul class = "nav navbar-nav">
        <li class = "dropdown">
          <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" style = "background-color:#3A9DFA; color:#ffffcc">Months<span class = "caret"></span></a>
          <ul class = "dropdown-menu">
            <li><a href = "october20.html">October 2020</a></li>
            <li><a href = "november20.html">November 2020</a></li>
            <li><a href = "december20.html">December 2020</a></li>
          </ul>
        </li>
        <li><a href = "#top"  style = "color:#ffffcc">Top</a></li>
        <li class = "dropdown active">
          <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" style = "background-color:#3A9DFA; color:#ffffcc">Song's from October<span class = "caret"></span></a>
          <ul class = "dropdown-menu">
           <li><a href = "#chandelier">Chandelier</a></li>
           <li><a href = "#talkhouse">Talkhouse</a></li>
           <li><a href = "#savagemode2">Savage Mode 2</a></li>
          </ul>
        </ul>
        
        <form class = "navbar-form navbar-right" action = "/action_page.php">
           <div class = "form-group">
                 <input type = "text" class = "form-control" placeholder = "Search">
           </div>
           <button type = "submit" class = "btn btn-default">Submit</button>
        </form>
    </div>
  </div>
</nav>