Cannot separate the item un-ordered list and button

Question

I don't know how to describe this problem. I'm using three styling frameworks Bootstrap, Semantic, and Materialize CSS. I've created an unordered list after that there is a button when I use the br tag to separate them separation works but the gap doesn't fill with the body background color so I used margin but still, the gap is not filling with body color.

You can see this problem in this

HTML code

<section>
        <div class="container dashboard ">
            <div class="row">
                <aside class="col-sm-3">
                    <ul class="list-group text-center">
                        <a class="list-group-item active" href="#">Dashboard</a>
                        <a class="list-group-item" href="#">All Posts</a>
                        <a class="list-group-item" href="#">Create/Edit Posts</a>
                    </ul>
                    <a class="btn btn-light btn-block" href="#"> <i class="fa fa-power-off"></i> <span class="text">Log out</span> </a>
                </aside>
            </div>
        </div>
    </section>

CSS

.dashboard{
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 30px 0px;
}

.dashboard .col-sm-3{
    border-bottom: none;
    border-radius: 5px;
    height: fit-content;
    padding-left: 0;
    padding-right: 0;
    background: #fff;
}

.dashboard .col-sm-3 ul a{
    text-decoration: none;
    font-weight: 500;
}

.dashboard .col-sm-3 .btn {
    margin-top: 50px;
}

.btn-light {
    background-color: #fff;
    border-color: #e4e4e4;
    text-align: center;
}

.btn-light span{
    text-transform: none;
    font-weight: 500;

}

Answer 1

You can check this question this thing will help you link

Actually, this question helps me too I've also faced a similar situation.

I will make this more simple I think this work you can try this

br {
    content: "A" !important;
    background: #fafafa !important;
    display: block !important;
    width: 100% !important;
    height: 30px !important;
}