Bootstrap right column overlaps the left column - html

Question

I am trying to have two columns in a navigation bar in bootstrap. But when I do, and I try resizing, the right column overlaps the left. I can't understand why. I see the problem arising from viewport size 769px and persists upto 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>

Answer 1

Try below code
<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 col-xs-12" 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 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
I have added working example here
.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 col-xs-12" 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 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>

Answer 2

Alright, I eventually found the answer to my own question. I had to add the clearfix class to the first column in the row. Although it fixed my issue, still would like to know if there are any other views.

Answer 3

<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-sm-9 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-sm-3 col-md-3" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
You missed to use col-sm-... for small devices