custom navbar style doesnt work correctly - html

Question

I have custom navbar, not any bootstrap or something else.
I tryed one tab is left and dropdowns are middle and one tab is right side.
But right side tab isnt inside navbar.
I dont understand why it is going out of navbar if it is in ul tag. Maybe someone can explain that.
HTML code:
<div id="nav">
<div id="nav_wrapper">
<ul>
<div id="left">
<li>
item #1
</li>
</div>
<div id="mid">
<li> dropdown #1
<ul>
<li>
dropdown #1 item #1
</li>
<li>
dropdown #1 item #2
</li>
<li>
dropdown #1 item #3
</li>
</ul>
</li>
<li> dropdown #2
<ul>
<li>
dropdown #2 item #1
</li>
<li>
dropdown #2 item #2
</li>
<li>
dropdown #2 item #3
</li>
</ul>
</li>
<li> dropdown #3
<ul>
<li>
dropdown #3 item #1
</li>
<li>
dropdown #3 item #2
</li>
<li>
dropdown #3 item #3
</li>
</ul>
</li>
</div>
<div id="right">
<li>
item #2
</li>
</div>
</ul>
</div>
<!-- Nav wrapper end -->
Style code:
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: #222;
}
#left{
float: left;
}
#mid{
margin-left: auto;
margin-right: auto;
text-align: center
}
#right{
float: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
z-index: 1;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
Added html and style code here.
Problem is right side isnt in navbar.
I think in divs is problem.

Answer 1

Pls try
#nav_wrapper ul{
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display:flex;
}
and now you DON'T have to give float:left and float:right to the #left and #right divs; and your right div will be aligned on the right end.
OR
Add the following codes to your existing styles, to align your third item on the right end.
#nav{
background-color: #222;
overflow:hidden;
}
#mid{
float:left;
}