My goal is to design a container using Bootstrap. I have successfully added a name and button at the top of the container as a row, set a background color, and included a border. However, there seems to be an issue with the width of the border compared to the row. On the right side, the border appears disconnected from the row, leaving a gap that doesn't complete the overall "window" effect. I have also attached a picture and included my code below.
<div
class="container"
style="border-radius: 5px; border: 2px solid #98bcdb;border-top-style: hidden; "
>
<div
class="row"
style="
background-color: #337ab7;
border: 3px solid #337ab7;
border-radius: 5px 5px 0px 0px;
color: white;
height: 40px;
padding: 5px;
"
>
<div class="col-6">
Dokumenty
</div>
<div
class="col-6"
style="
display: flex;
justify-content: flex-end;
align-items: baseline;
"
>
<i class="fa-solid fa-plus"></i>
Připojit soubor
</div>
</div>
<br />
</div> Initially, the border was detached at the top as well, but I managed to fix that by removing the top section of the border. While it looks better now, the issue on the right side still persists.