I put my content on top of my Bootstrap menu

It did not occur to you to color a padding between the objects to keep them at a safe distance. Remember that you can work responsive design when you change the resolution of your screen.

  .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;
  padding: 2px 10px;
}

Since which device are you testing? Well in the first case where you assign the 3 columns you are defining the width of columns for the case large devices ( col-lg-* ), for medium ( col-md-* ) and for extra children ( col-xs-* ).

<!-- Asigno que sea de 3 columnas el menu -->
<div class="col-xs-12 col-md-3 col-lg-3">

However when defining the other 9 columns you are only doing it for medium devices ( col-md-* ), you need to define the columns for the other devices. If you are testing on a large screen, it is likely that it will not be seen correctly.

<!-- Asigno que sea de 9 columnas el contenido -->
<div class="col-md-9">

Now, to ensure that all the content is seen within the same row, put a <div class="row">Aqui todo tu codigo</div> to be seen in a single row.

<!-- Asigno que sea de 3 columnas el menu -->
<div class="row">
<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: <?php echo $_SESSION['puesto']; ?></label></h3>
                <h3><?php echo date('d - M - Y'); ?></h3>
              </div>
              <div class="col-md-6">
                <h3><label>Bienvenido <?php echo $_SESSION['nombre']; ?> <?php echo $_SESSION['apellido']; ?></label></h3>
              </div>

            </div>

            <!--  row 1 -->
            <div class="row">

              <div class="col-md-8">
                  <center>
                    <span class="glyphicon glyphicon-user"></span>
                    <br>
                    <label class="label label-default"><?php echo $_SESSION['puesto']; ?><label/>
                  </center>
              </div>

            </div>
        </div>

    </section>

</div>

I recommend that you first make a design that is what you want to do, because the code is more organized and it is difficult to understand what you want to do.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo de la empresa</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Users</a></li>
    </ul>
  </div>
</nav>

Use the <nav> tag to define your navigation menu. You can guide here .