Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size is between 769px and 992px.
HTML
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>