Firefox pushing content out of div when floating right - html

Question

I am currently designing the navigation bar for my website and I've come across a problem in firefox. I have my logo to the left and my navigation content to the right, but the entire navigation content is being pushed out of the nav div (only on Firefox). What can I do to fix it?
Firefox:
http://i.cubeupload.com/OoAJIe.png
Chrome:
http://i.cubeupload.com/QXo2KS.png
Here is my HTML:
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo"><img src="images/Spendr.png" /></li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
Here is my CSS:
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed /*fixed*/;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li, .nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
} .nav .tab{
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab { border-radius: 3px; }
.nav .txt a {
padding-left:18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}

Answer 1

Since you're floating the .tab elements right, add .logo { float: left; } and that will make the list items all float on either side of the menu.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.logo {
float: left;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
You could also change the menu to a flex layout and use an auto margin on .logo to separate the elements.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.nav ul {
display: flex;
}
.logo {
margin-right: auto;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>