bootstrap grid not working - css

Question

On the picture is right side of my site. Some elements out from bootstrap grid.
<div class="container">
<div class="col-md-12">
<div class="row">
First
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg"><i class="fa fa-bars"></i></button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
Why element nav can out from bootstrap grid? My main part is gray

Answer 1

Not really sure what is wrong with your markup or style, it's hard to understand from the given content, but you should put .col-md-12 inside of .row not the other way around.
Here are some examples: https://getbootstrap.com/examples/grid/

Answer 2

I would definitely familiarize yourself with how the HTML and CSS classes should be structured with bootstrap. You will need to start with a container class(eg. class="container"). Inside the container goes rows (class="row"), and inside the rows is your columns(eg. class="col-md-12").
Check out this page: http://getbootstrap.com/css/
If you are looking to build a nav out in bootstrap you do not necessarily need to re-invent the wheel and can use their Navbar Template: http://getbootstrap.com/examples/navbar/
Possibly something like this would work for you:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
First
</div>
<div class="col-xs-9">
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg">menu</button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 3

You should try using bootstrap4 class.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar">
<li class="nav-item"><a class="nav-link" href="#">Home</li>
<li class="nav-item"><a class="nav-link" href="#">career</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</li>
<li class="nav-item"><a class="nav-link" href="#">about</li>
</ul>
</div>
</nav>
in case of you want to have vertical navigation then in nav tag remove the navbar-expand class.