title: Bootstrap Dropdown Menu Link Won't Align with Rest of Links in Navbar
body: <p>For some reason dropdown links do not align with the rest of the links in the Bootstrap navbar and are positioned lower.  I can also see when using a the live preview that it is positioned strangely within its boundaries which you can see in my screen shot. The blue outline represents ".dropdown" </p>
  
  <p><a href="https://i.stack.imgur.com/QmG7v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QmG7v.png" alt="enter image description here"></a></p>
  
  <p>I found someone having the exact same problem here: </p>
  
  <p><a href="https://stackoverflow.com/questions/44196301/how-to-align-dropdown-menu-in-navbar-in-bootstrap-with-css">How to align dropdown menu in Navbar in Bootstrap with css?</a></p>
  
  <p>However, that solution is not working for me. In fact I cannot change the position of the drop down link at all with positioning, margins or padding.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button id="menuButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;br&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;br&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav nav-pills nav-justified"&gt;
           &lt;li class="active"&gt;&lt;a href="index.html"&gt;&lt;img src="images/rainbowLogo.png" id="homeLogo"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a class="navbar-brand dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"&gt;Menus
                &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Store Menu&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Weedmaps&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
          &lt;li&gt;&lt;a href="pakablog.html"&gt;Pakablog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="apparel.html"&gt;Apparel&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="cultivation.html"&gt;About&lt;/a&gt;&lt;/li&gt;   
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar.navbar-inverse.navbar-fixed-top {
  display: block;
  margin: 0 auto;
  width: 100%;
  height:110px;
  max-width: 1920px;
  background-color: #222222;
  }
  
  .nav.nav-pills li a{
  line-height: 3em;
  padding: 0px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
  background-color: #222222;  
  font-family: 'Wendy One', sans-serif;
  font-size: 36px;
  display: table-cell;
  margin-top: -49px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
  }
  
  .nav-pills li a:hover{
    color: #4EB848;
    background-color: #222222;
  
  }
  
  .nav-pills&gt;li.active&gt;a, .nav-pills&gt;li.active&gt;a:hover, .nav-pills&gt;li.active&gt;a:focus{
    color: #4EB848;
    background-color: #222222;
  }
  
  
  @media (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse.collapse {
      display: none !important;
  }
  .navbar-collapse.collapse.in {
      display: block !important;
  }
  .navbar-header .collapse, .navbar-toggle {
      display:block !important;
  }
  .navbar-header {
      float:none;
  }
  }
  
  #menuButton {
  width:80px;
  height: 80px;
  align-content: center;
  border-color: white;
  }
  
   .navbar-toggle .icon-bar {
   display: block;
   width: 55px;
   height: 5px;
   background-color: #cccccc;
  
  }
  
  .dropdown:hover .dropdown-menu {
  display: block;    
  }
  
  .dropdown-menu:hover{
  display: block;
  }
  
  .navbar-brand.dropdown-toggle {
  margin: 0px;
  }
  
  .dropdown {
  position: absolute;
  margin: 0px;
  padding: 0px;
  }
  
  .dropdown-menu {
  margin-top: 45px;
  margin-left: -20px;
  padding: 10px;
  
  }    
  </code></pre>