bootstrap navbar not displaying correctly on tablet - css

Question

I have a little problem, i got bootstrap navbar set up, but when i resize it to the tablet width, menu escapes the navbar and gets into content like shown here:
http://oi57.tinypic.com/2uykv9g.jpg "see the problem"
Is the menu too wide ? Any help how to fix this would be greatly appriciated.
Code here:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="active"><i class="fa fa-home"></i></li>
<li>Packages</li>
<li>Examples of webpages</li>
<li>Our Services</li>
<li>Benefits</li>
<li>References</li>
<li>Contact </li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>

Answer 1

Ok i fixed it, so in case somebody else is having that problem, all i did was scale down the logo (which was partially the problem) to 80% on devices smaller than 992px, gave it an absolute positioning etc, here is the css:
#navbar-height: 150px;
#navbar-brand-vpadding: 10px;
.navbar-brand img {
height: #navbar-height - #navbar-brand-vpadding * 2;
position: absolute;
top: #navbar-brand-vpadding;
}
#media (max-width: 992px) {
.make-custom-class-here {
width:201px;
height:41px;
}
}