title: Dropdown position Issue
body: <p>I'm working on navbar dropdown menu and him having some trouble trying to position the dropdown menu with a width 100% but when every I put width to 100% it expands to right but not the left side.</p>
  
  <p>Here the link to a preview of my project working on. Hope someone by can help with the small quick problem having.</p>
  
  <p>Preview Link --> <a href="https://brandonpowell.github.io/alegacyleftbehind/" rel="nofollow noreferrer">https://brandonpowell.github.io/alegacyleftbehind/</a></p>
  
  <p><a href="https://i.stack.imgur.com/5haOW.png" rel="nofollow noreferrer">This is what trying to accomplish</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="navbar-default primary-nav navbar-fixed-top nav-down"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="top-navbar"&gt;
  &lt;div class="media-icons"&gt;
  &lt;a href="#"&gt;&lt;i class="fa fa-facebook-official" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;i class="fa fa-instagram" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;i class="fa fa-twitter-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a href="#"&gt;&lt;div class="donate-button"&gt;
  &lt;p&gt;Donate&lt;/p&gt;
  &lt;/div&gt;&lt;/a&gt;
  
  &lt;div class="bottom-navbar"&gt;
  &lt;div class="logo"&gt;Logo Here&lt;/div&gt;
  &lt;div class="nav-menu"&gt;&lt;img src="icons/menu.svg"&gt;&lt;/div&gt;
  &lt;ul class="navbar"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Founder's Message&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false"&gt;About Us&lt;/a&gt;
  &lt;ul class="nav-content"&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;dropdown item 6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Join Our Team&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;News &amp; Events&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Campus Clubs&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>body, html {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; }
  
  nav .top-navbar {
    background-color: #212121;
    position: absolute;
    height: 67px;
    width: 100%; }
  
  .donate-button {
    position: relative;
    float: right;
    top: 0px;
    z-index: 1; }
    .donate-button p {
      font-style: Montserrat, sans-serif;
      background-color: #961de7;
      letter-spacing: 1px;
      padding: 21.4px 35px;
      margin-bottom: 0px;
      font-weight: bold;
      text-transform: uppercase;
      color: white; }
  
  .bottom-navbar {
    background-color: white;
    width: 100%;
    display: inline-block;
    -webkit-box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.2); }
  
  .nav-menu {
    display: none; }
  
  .navbar {
    display: table; }
    .navbar a:hover {
      color: pink; }
    .navbar li {
      display: table-cell;
      list-style-type: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
      letter-spacing: 0.5px;
      font-weight: bold;
      text-transform: uppercase; }
      .navbar li a {
        text-decoration: none;
        color: #212121; }
  
  .nav-content {
    position: absolute;
    top: 13.3em;
    z-index: -1;
    padding: 1.3em 0 !important;
    overflow: hidden;
    width: 100%;
    background-color: #a656dc; }
    .nav-content a {
      color: white;
      text-decoration: none; }
  
  .logo {
    background-color: #961de7;
    color: white;
    font-size: 16pt;
    float: left;
    padding: 39px 6%; }
  </code></pre>