remove space above the hr tag - html

Question

I want to remove the space above hr tag.now I get some unwanted space.I want to remove it.I want to start hr line where I marked in green.Please see my above edited question.This is my whole body section.
Css
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
position:relative;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
html
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
</div>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->

Answer 1

Remove property margin-top i.e. margin-top: 150px;
from your class sidemenu :
Use the class mentioned below :
.sidemenu {
float: left;
width: 100%;
}
To align content to center, add below CSS class to outer
.outer{
margin-left:50%;
width:100%;
}
And you will see the desired output.

Answer 2

Give overflow hidden for outer wrapper

Answer 3

I assumed your HTML structure and CSS are as JS below:
<div class="wrapper">
<div class="sidemenu">
left
</div>
<hr>
<div class="container">
right
</div>
</div>
DEMO 1
As you can see with the different background color.
The padding of the outer wrapper is giving you spacing above the hr tag.
Removed the padding top/padding bottom for the outer wrapper use the padding within the sidemenu and content. As I use in JS below:
DEMO 2