Я пытаюсь сделать адаптивный сайт. Все отлично, но у меня есть проблема. Когда я получаю меньшее окно, область содержимого падает ниже панели навигации.
Я хочу оставить панель навигации слева, а контент - справа. Бок о бок. Как я могу это исправить?
![This window](https://i.stack.imgur.com/LkAdC.jpg)
![turns this](https://i.stack.imgur.com/YSb9j.jpg)
Вот мои коды
/*Navbar*/
div.navbar-inside a{
text-decoration: none;
font-family: "bocek-bold";
background-color: #f1f1f1;
display: block;
padding: 8.8px 14.2px;
text-decoration: none;
border-bottom: 1px solid #803104;;
color: #f75c03;
}
div.navbar-inside {
list-style-type: none;
display: table-row;
margin: 15px;
padding: 0;
width: 144px;
font-family: "bocek-bold";
font-size: 1.1em
}
div.navbar-inside a:hover {
background-color: #db995a;
color: #654236;
}
/*Content*/
.content-inside {
font-family: "bocek-bold";
font-size: 1.4em;
height: auto;
margin-left: 70px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.5);
}
<!--Middle area. Navbar, content-->
<div class="row">
<!--Navbar-->
<div class="col-xs-0 col-md-2 navbar-inside" style="background-color:rgb(77, 58, 95);" >
<div class="col-xs-0 col-sm-4 col-lg-2 navbar-inside">
<a href="index.html">Anasayfa</a>
<a href="hakkimizda.html">Hakkımızda</a>
<a href="kadromuz.html">Kadromuz</a>
<a href="referanslar.html">Referanslar</a>
<a href="iletisim.html">İletişim</a>
</div>
</div>
<!--Content-->
<div class="col-xs-12 col-md-10 content-inside" style="background-color: rgb(43, 189, 226);">
<p>
CONTENTCONTENTCONTENTCONTENTCONTENT
</p>
</div>
</div>