Bueno mi contenido se encima con mi menú y eso que lo pongo dentro de un col-md cada parte procurando que tenga en total 12 y todo eso dentro de un row
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
<div class="row">
<!-- Asigno que sea de 3 columnas el menu -->
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Asigno que sea de 9 columnas el contenido -->
<div class="col-md-9">
<section class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="margin-top:70px;">
<div class="container">
<!-- row 1 -->
<div class="row">
<div class="col-md-6">
<h3><label>Puesto: <span><?php echo $_SESSION['puesto']; ?><span/></label></h3>
<h3><?php echo date('d - M - Y'); ?></h3>
</div>
<div class="col-md-6">
<h3><label>Bienvenido <span><span/><?php echo $_SESSION['nombre']; ?> <?php echo $_SESSION['apellido']; ?></label></h3>
</div>
</div>
<!-- row 1 -->
<div class="row">
<div class="col-md-8">
<center class="">
<span class="glyphicon glyphicon-user iconPresentation"></span>
<br>
<label class="label label-default labelPresentation"><?php echo $_SESSION['puesto']; ?><label/>
</center>
</div>
</div>
</div>
</section>
</div>
</div>
Ya lo demás son estilos de color y diseño... Se encima cuando la página llega a 993px y de hecho se come la letra ¿que no hago o que hago mal?
z-index
a tu menú?z-index:100
(o algún número grande para que sea mayor que el del contenido de debajo).