Как выровнять hr с div под ним?

Question

Попытка выровнять час с делением под ним.Это css:

hr {
    display: block;
    height: 5px;
    border: 0;
    border-top: 10px solid #ccc;
    margin: 1em 0;
    padding: 0;
    width:80%;
}

строка в настоящее время не выровнена с div # main она слишком сильно слева:

<hr class="line">
<div id="main" class="container border">
    <div class="row">
    </div>
</div>

Как я могу выровнять это с div, получить ту же ширину и в то же время сделать его отзывчивым?

здесь кодовая ручка

Answer 1

Изменены стили hr к марже: 1 авто;Но если только вы хотите, чтобы он был в центре и не требовалось отступа сверху, margin: auto достаточно.Надеюсь, вы получили ответ

Answer 2

Я думаю, вот что вы хотите: codepen вы также можете удалить 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 3

Я изменил эту строку с поля: 1em 0;на полях: 1 0;Теперь час находится в центре.

и ширина: 95%;