How to align hr with div below it? - html

Question

Trying to align an hr to a div below it. This is the css:
hr {
display: block;
height: 5px;
border: 0;
border-top: 10px solid #ccc;
margin: 1em 0;
padding: 0;
width:80%;
}
the line is currently not aligned with the div#main it is too much to the left:
<hr class="line">
<div id="main" class="container border">
<div class="row">
</div>
</div>
How can I align this with the div, get the same width and at the same time make it responsive?
codepen here

Answer 1

I guess here is what you want: codepen
you can also remove hr margin
<div>
<hr class="line container">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-5"><label for="title">Title</label><input id="title" type="text" placeholder="Title placeholder" name="title" value=""><label for="temp">Temperature</label><span id="tempArea" class="row"><span class="col-lg-4"><input type="radio" id="c" class="spaceradio" value="metric" checked=""><label for="c" class="radios">℃</label></span>
<span
class="col-lg-4"><input type="radio" id="f" class="spaceradio" value="imperial"><label for="f" class="radios">℉</label></span>
</span><br><label for="temp">Wind</label><span id="windArea" class="row"><span class="col-lg-4"><input type="radio" id="n" class="spaceradio" value="true"><label for="n" class="radios">On</label></span><span class="col-lg-4"><input type="radio" id="o" class="spaceradio" value="false" checked=""><label for="o" class="radios">Off</label></span></span>
</div>
<div class="divider"></div>
<div class="col-lg-5">
<div class="border">
<div class="row">
<div class="border-right col-lg-6"><img src="http://openweathermap.org/img/w/02d.png"></div>
<div class="col-lg-6"><br>
<h2>65.34<label>℉</label></h2>
</div>
</div>
</div>
</div>
</div>
</div>
.line {
border-top: 10px solid #ccc;
padding: 0 !important;
}

Answer 2

Changed styles of hr to margin: 1 auto; But if only want to make it center and no need of margin at top , margin: auto is enough. Hope you got the answer

Answer 3

I changed this line from margin: 1em 0; to margin: 1 0;
Now hr is in center.
and width:95%;