Adding a dropdown list to a fixed banner

I created a dropdown list for my client and have been asked to now ensure the banner is fixed in position no matter the page or place on the page. I have managed to fix the banner in place, but am unsure how to remove the inherited 100% width element from the dropdown list. As you can see the dropdown list has a large section of the background #333 on the left hand side. I am looking to remove all of this but have not had much luck. There must be a way surely! Has anyone had experience in this before?

nav a {
    font-size: 1.6em;
    text-decoration: none;
    list-style-type: none;
}
.navbar {
    overflow: hidden ;
    background-color: #333;
    font-family: Arial;
    position: fixed;
    top: 0;
    width: 100%;
  }
  /* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: right;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 30px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: inherit;
    background-color: #f9f9f9;
    min-width: 130px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
    width:unset;
  }

  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
     nav ul, li { /* reset the margin and padding for nav */
    margin: 0;
    padding: 0;
   }

 <div class = "navbar">
        <nav>
            <div class ="dropdown">
            <button class="dropbtn">-<br>-<br>-<br>
                <i class="fa fa-caret-down"></i>
              </button>
            <div class ="dropdown-content">
            <ul>
                <a href="index.html" ><li>Shop</li></a>
                <ul>
                    <a href ="index.html"><li>Candles</li></a>
                    <a href ="melts.html"><li>Melts</li></a>
                    <a href ="plates.html"><li>Plates</li></a>
                </ul>
                <a  href="about.html"><li>About</li></a>
                <a href="contact.html"><li>Contact</li></a>
            </ul>
        </nav>