Bootstrap стол толкает боковое меню и получает странную ширину

Question

Моя проблема в том, что я не могу заставить таблицу и боковое меню нормально работать в столбцах начальной загрузки, как видно на рисунке. Я пробовал разные вещи, но ничего не помогает. Я хочу, чтобы таблица и боковое меню были отзывчивыми, и я не понимаю, почему таблица отталкивает другой контент. Я хочу, чтобы таблица заполнила 7 столбцов, а боковое меню - 3 столбца.

Я надеюсь, что вы можете помочь!

Образ

.vertical-menu {
    font-family: 'Roboto';
}

.vertical-menu a {
    background-color: #eee; 
    color: black; 
    display: block; 
    padding: 12px; 
    text-decoration: none; 
}

.vertical-menu a:hover {
    background-color: #ccc; 
}

.vertical-menu a.active {
    background-color: #4CAF50;  
    color: white;
}

#coin{
  text-align: center; 
  background-color: #343434;
  color: #FFF;
  padding: 10px;
  margin: 0;
  border-top-right-radius: 12px;
  font-family: 'Roboto'; 


}

.main {
 display:inline-block;
 height: auto;
}

.content {
 }

.table {
 width: 800px;
}

.main h3 {
 margin-left: 390px;
 font-family: 'Roboto';
 margin-top: 40px; 
}

<div class="main">
 <div class="row">
  <div class="col-md-3">

<div class="vertical-menu" >
 <h5 id="coin">Coins</h5>
  <a href="#" class="active">BTC</a>
  <a href="#">BitC</a>
  <a href="#">Eth</a>
  <a href="#">LightC</a>
  <a href="#">iota</a>
  <a href="#">ripple</a>
  <a href="#">Verge</a>
  <a href="#">Cardano</a>
  <a href="#">NEM</a>
  <a href="#">TRON</a>
  <a href="#">Dash</a>
  <a href="#">EOS</a>
  <a href="#">NEO</a>
  <a href="#">Monero</a>
  <a href="#">Qtum</a>
</div>
</div>
<div class="col-md-9">
<h3>Bitcoin</h3>


<table class="table table-hover table-responsive">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>

Answer 1

Оберните его внутри div, имеющего таблицу resposive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>