Bootstrap table pushing a sidemenu and gets a wird width

My problem is that I can´t get the table and the side menu to act normal in bootstrap columns as can be seen in the picture. I have tried some different things but nothing helps. I want the table and the side menu to be responsive and I don't understand why the table pushes the other content away. I want the table to fill 7 cols and the side menu to fill 3 cols.

I hope you can help!

Image

.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>

Solution

wrap it inside div having class table-resposive

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