There is a menu, but there are indents on the sides of the menu. I tried to align the blocks to the width, but the padding in gray does not go anywhere. red line showed them

<nav class="navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="d-md-none"> <a class="navbar-brand d-xm-block" href="#">Hidden brand</a></div> <div class="col"> <a href="сказка" class="list-group-item list-group-item-action"><span>сказка</span> <span class="badge badge-primary badge-pill" style="color:#000;font-size:10px;">3</span></a> <a href="история" class="list-group-item list-group-item-action"><span>история</span> <span class="badge badge-primary badge-pill" style="color:#000;font-size:10px;">5</span></a> </div></div> </nav>

    1 answer 1

    Your <div class="col"> adds padding-right: 15px; padding-left: 15px; padding-right: 15px; padding-left: 15px;

    There are many solutions to your problem ...

    Add a new class that will remove padding , or remove class="col" , but you will have to add a width:100%