Dropdown position Issue [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
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.
Here the link to a preview of my project working on. Hope someone by can help with the small quick problem having.
Preview Link --> 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">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</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>Home</li>
<li>Founder's Message</li>
<li>About Us
<ul class="nav-content">
<li>dropdown item 1</li>
<li>dropdown item 2</li>
<li>dropdown item 3</li>
<li>dropdown item 4</li>
<li>dropdown item 5</li>
<li>dropdown item 6</li>
</ul>
</li>
<li>Join Our Team</li>
<li>News & Events</li>
<li>Campus Clubs</li>
<li>Resources</li>
<li>Contact Us</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%; }

Answer 1

you need to add a value for 'left' to the nav-content div like this:
.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*/
}
and to center the menu add margin:auto to the ul element like this:
.nav-content ul {
margin:auto;
}