Navbar-collapse (Ipad menu) does not expands by it self in Bootstrap - css

Question

I have a weird problem that I just can't fix. Have tried alot of different things, but none seem to work.
When my site is in collapse mode = Ipad menu shows, it looks weird. I have made an image so you can see how it looks.
Well, first of all it does not expands by it self, which it should do? You can see that the menu item Destination are outside.
Second, how do I move the menu content more to the left, so there can be the same white space on each side? right now it looks silly :(
In my bootstrap.css file, i have only made some color changes. My navbar code from the Site.css file you see here:
/*---------------------------------------------*\
Navbar elements
\*---------------------------------------------*/
.navbar-inverse {
background-color: white;
border-width: 0px;
padding-top: 25px;
font-family: 'Raleway', sans-serif;
font-weight: 100;
}
.navbar-header {
padding-bottom: 30px;
padding-left: 80px;
}
.navbar-header a {
font-weight: 700;
vertical-align: baseline;
}
.navbar-header a:hover {
color: #003665;
}
#media (max-width: 1200px) {
.navbar-header {
padding-left: 10px;
}
}
#media (max-width: 768px) {
.navbarup {
display:none;
}
}
.navbarup {
height: 40px;
}
.navbarmiddle {
border-top: thick solid #205882;
border-width: 2px;
}
.navbarunder {
font-weight: 400;
font-size: 17px;
font-family: 'Lato', sans-serif;
padding-left: 80px;
}
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
display: block;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
.links {
float: right;
margin-top: 20px;
margin-left: 300px;
}
Code (some of it):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img height="55px" src="~/images/logo.jpg" />
</div>
</div>
</div>
<div class="navbarmiddle">
</div>
<div class="container">
<div class="row">
<div class="navbarunder">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class='#Html.IsActive("Home", "Index")'>
#Html.ActionLink("Home", "Index", "Home")
</li>
Can any tell me what elements i should try to tweak with css?

Answer 1

https://jsfiddle.net/6u9zoe5e/
bootstrap.js placed in the footer?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>