Почему нижний колонтитул позиция тега изменяется в зависимости от предыдущего <div>содержимого тегов?

Question

У меня проблемы с тегом нижнего колонтитула <hr/> в проекте ASP. NET MVC. У меня есть значение по умолчанию _Layout.cshtml со следующим тегом <hr/> (между @RenderBody() и <footer>):

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

У меня есть простая страница просмотра:

@{
    ViewBag.Title = "Layout Test";
}

<h2>Layout Test</h2>
<hr/>

<p>
    @Html.ActionLink("Back to home", "Index")
</p>

<div class="col-md-12">
    <div class="col-md-3" style="background-color: rgba(163, 73, 164, 0.3)">

    </div>
    <div class="col-md-9" style="background-color: rgba(255, 0, 0, 0.3)">

    </div>
</div>

Когда отображается это представление, я вижу тег <hr/> ниже <h2>Layout Test</h2> и тег <hr/> от _Layout.cshtml. Там отображаются в виде линии, которая занимает 100% ширины, как и ожидалось. Но если я добавлю контент в предыдущих тегах <div>, второй <hr/> исчезнет. Например:

<div class="col-md-12">
    <div class="col-md-3" style="background-color: rgba(163, 73, 164, 0.3)">
        <ul>
            <li id="1">Root
                <ul>
                    <li id="2">Folder 1</li>
                    <li id="3">Folder 2
                        <ul>
                            <li id="4">Folder 2.1</li>
                            <li id="5">Folder 2.2
                                <ul >
                                    <li id="6">Folder 2.2.1</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li id="7">Folder 3</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-md-9" style="background-color: rgba(255, 0, 0, 0.3)">
        <p>Some content here</p>
        <p>Some content here</p>
        <p>Some content here</p>
        <p>Some content here</p>
        <p>Some content here</p>
        <p>Some content here</p>
    </div>
</div>

Используя DevTools Chrome, я вижу, что тег находится более или менее на той же высоте, что и теги <div> на правой стороне.

Итак, вопросы в том, почему это происходит? Что мне нужно сделать, чтобы отобразить тег нижнего колонтитула <hr/> со 100% шириной между содержимым и текстом авторского права нижнего колонтитула?