Align megamenu content with container div - html

Question

I'm working on a navbar with a megamenu.
To manage the megamenu I'm using the bootstrap-dropmenu library (GitHub link) based on Bootstrap 3.
Everything is working well, but the megamenu content is not aligned with the div container.
Here a screenshot to explain better the problem.
What I'd like is to have the first element of the megamenu aligned with "LOGO".
Here HTML the code:
<nav class="navbar top-menu">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand logo" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse navigation-menu">
<ul class="nav navbar-nav">
<li>
home
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" >tab 1</a>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
<li>elem 4</li>
</ul>
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the CSS:
.top-menu{
background: green;
}
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
}
.logo:hover, .logo:visited, .logo:link, .logo:active {
color: #FFFFFF;
text-decoration: none;
}
.navigation-menu{
width:auto;
float:left;
}
.navigation-menu li{
font-size:13px;
font-size:1.3rem;
display:block;
font-weight:700;
line-height:16px;
text-align:left;
text-transform:uppercase;
margin:0 10px;
}
.navigation-menu li a{
color: #FFFFFF;
display:block;
padding:20px 20px;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
}
.dropdown-megamenu li a{
font-size:13px;
font-size:1.3rem;
color: #000080;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.dropdown-megamenu li a:hover{
font-size:13px;
font-size:1.3rem;
color: #e5ae07;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
background-color: #b3b3ff;
color:#000080;
text-decoration: none;
display:block;
height: 100%;
margin-top: 0;
margin-bottom: 0;
}
ul.nav a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.nav > .dropdown-megamenu {
position: static;
}
.nav .open>a {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid transparent;
}
.nav .open>a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
}
.dropdown-menu>li {
display: inline;
padding: 10px;
}
I've have prepared a JSFiddle with the real case.
Can anyone explain to me how to achieve my goal?

Answer 1

You are using a div with class container which was actually causing issue.Because by default it was adding margin and paddings to your navbar.I have removed that div. Plus did some addition to your logo margin-left and dropdown-container:
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
/* addition to your code */
margin-left: 25px;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
/* Addition to your code*/
padding: 0px 13px;
}
You can check the JSFiddle. It is also responsive.