Row doesn't completely fill container width

March 27, 2022

I’m trying to create a container with bootstrap. I added a name and a button to the top of the container as a row, added back-ground color, and I added a border to the container. The border, however, is slightly wider than the row, so on the right side the border is disconnected from the row and doesn’t complete the "window" if you will. Added a picture and my code.

 <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>

border

At first the border was disconnected at the top aswell, but I removed the top side of the border. It looks slightly better, but the right side is still disconnected.

>Solution :

I just spent 10 minutes trying figure out why the container border set to 2px, but displays as 1.9px, which produced a 1px gap between it and it’s child. Turned out I had my browser’s zoom set to 90%. Perhaps that’s the issue on your end too? Otherwise it looks fine:

.container
{
  border-radius: 5px;
  border: 2px solid #98bcdb;
  overflow: hidden; /* added to hide square corners of the child */
}

.row
{
  background-color: #337ab7;
  border: 0px solid #337ab7;
/*  border-radius: 5px 5px 0px 0px;*/
  color: white;
  height: 40px;
  padding: 5px;
}

.col-6.right
{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

<div
      class="container"
    >
      <div
        class="row"
      >
        <div class="col-6">
          Dokumenty
        </div>

        <div
          class="col-6 right"
        >
          <i class="fa-solid fa-plus"></i>
          Připojit soubor
        </div>
      </div>
      <br />
</div>

Also note, I removed border rounding for the child, because it produced different radius than parent, instead I’m hiding overflow in the container