ドロップダウンの位置の問題

Question

私は、幅100％のドロップダウンメニューを配置しようとするといくつかの問題を抱えていますが、幅が100％になるたびに右に拡張されますが、左側には展開されません。

私のプロジェクトのプレビューへのリンクです。小さな素早い問題を持っている人を助けることができます。

プレビューリンク - >https://brandonpowell.github.io/alegacyleftbehind/

This is what trying to accomplish

HTML

<nav class="navbar-default primary-nav navbar-fixed-top nav-down"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="top-navbar"> 
<div class="media-icons"> 
<a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
<a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
</div> 
</div> 

<a href="#"><div class="donate-button"> 
<p>Donate</p> 
</div></a> 

<div class="bottom-navbar"> 
<div class="logo">Logo Here</div> 
<div class="nav-menu"><img src="icons/menu.svg"></div> 
<ul class="navbar"> 
<li><a href="#">Home</a></li> 
<li><a href="#">Founder's Message</a></li> 
<li><a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">About Us</a> 
<ul class="nav-content"> 
<li><a href="#">dropdown item 1</a></li> 
<li><a href="#">dropdown item 2</a></li> 
<li><a href="#">dropdown item 3</a></li> 
<li><a href="#">dropdown item 4</a></li> 
<li><a href="#">dropdown item 5</a></li> 
<li><a href="#">dropdown item 6</a></li> 
</ul> 
</li> 
<li><a href="#">Join Our Team</a></li> 
<li><a href="#">News & Events</a></li> 
<li><a href="#">Campus Clubs</a></li> 
<li><a href="#">Resources</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</div> 
</div> 
</div> 
</nav> 

CSS

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%; } 

あなたはNAV-コンテンツに '左' に値を追加する必要が

Answer 1

divのように：

.nav-content { 
     position: absolute; 
     top: 13.3em; 
     z-index: -1; 
     padding: 1.3em 0 !important; 
     overflow: hidden; 
     width: 100%; 
     background-color: #a656dc; 
     left: 0; /*add this*/ 
    } 

とマージンを追加するメニューを中央に：このようなUL要素に自動：

.nav-content ul { 
     margin:auto; 
    }