Bootstrap navbar is not very responsive - html

Question

I am learning bootstrap but i have problems. Website looks normal on computer screen but not on phone. My navbar is not very responsive. Look at this: http://gyazo.com/38234d9e9d9e9dc5dc81903427bb455b . IMG is going under the navbar. What should I do?
website is here: http://www.maesepp.tk
This is my navbar code:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Avaleht
</li>
<li>
Teenused
</li>
<li>
Meist
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="peamaja.html">Galerii
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Peamaja</li>
<li>Saunamaja</li>
<li>Transport</li>
<li>Laaksaare sadam</li>
<li>Privaatrand</li>
</ul>
<li>
Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
And this is my css:
.navbar .nav > li > a {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: white;
font-size: 1.2em;
}
.navbar-inverse{
background:rgba(0,0,0,0.2);
border-radius: 5px;
border-bottom: none;
}
#media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}

Answer 1

Add this to your css and it will prevent the navbar from overlapping your image:
#media (max-width: 768px) {
body {
margin-top: 50px;
}
}
BUT it will still go under your navbar when you scroll (obviously) so if you wnt to prevent that too, just remove the opacity of the navbar on mobile like this:
#media (max-width: 768px) {
.navbar-inverse {
background:rgba(0,0,0,1);
}
}

Answer 2

If I understand the question correctly, you mean that the logo appears under your navbar, just increase the margin of the logo (css "img#teenused" at line 164)
http://i.stack.imgur.com/AOWEW.jpg