HTML Bootstrap Grid - html

Question

<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue" >
</div>
</div>
</body>
view
I cleaned it up as much as possible. I also added colors to each div so it's clear to see.
I divided up my page into 4. 2 of them called sidenavs to create spaces on both sides to center view my main content, 1 is for the user image, name and nav buttons and the other one is for other content like personal info and will probably add more. So i divided them respectively: 1 - 2 -8 - 1
My problem is that, i don't understand the current alignment of my columns, As you can see from the image, side nav blue which should be at the right edge is now at the bottom. I made sure that all my columns sizes add up to 12 which is the maximum so i don't know why the other div is pushed down to the next row.
P.S. all those weird html names like sidenav even though it's not a navigation bar which is on the side. And the row content with an already div container. I copy pasted whole html page code from free bootstrap template(you can actually see the resemblance if you downloaded some of them - i'm not good at deciding how to design my pages so i just decided to pick from a template and tweak it however i want)

Answer 1

Is this how it's meant to look?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row content">
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
<div class="col-sm-2" style="background-color:orange">
<div align="center" style="background-color:pink">
<img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
<h3>JOHN</h3>
</div>
<div class="navbar-default" role="navigation" style="background-color:purple">
<ul class="nav" id="side-menu">
<li>Profile</li>
<li>Published</li>
<li>Bookmarked</li>
</ul>
</div>
</div>
<div class="col-sm-8" style="background-color:yellow">
<h3>Personal Information</h3>
<table id="personal-information" class="table" align="left">
<tbody>
<tr>
<td>Joined:</td>
<td>2018-02-10</td>
</tr>
<tr>
<td>Last Active:</td>
<td>2019-10-15 12:15:17</td>
</tr>
<tr>
<td>Gender:</td>
<td>MALE</td>
</tr>
<tr>
<td>Age:</td>
<td>26</td>
</tr>
<tr>
<td>About me:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-1 sidenav" style="background-color:blue">
</div>
</div>
</div>
If so, you had
<div class="col-sm-1 sidenav" style="background-color:blue"></div>
Outside of
<div class="row content"></div>
See here: JSFiddle