Remove Vertical Space in Bootstrap 4 Row - html

I want to remove the vertical space (look at this image below => red mark)
Using : Bootstrap 4
Preview : https://jsfiddle.net/3vcp8o15/
i've tried to put class m-0 and p-0 inside each col-6, but its still doesn't work.
is any wrong with my code?
here my current code:
<div class="row">
<div class="col-6 w-100">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
#foreach($transaction->retail_transaction_products as $row)
<tr>
<td class="text-left">{{ $row->product->name }}</td>
<td class="text-center">{{ $row->quantity }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->code }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->code }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Is anyone can help me? thanks in advance!
i've tried to use float-right/left too, but i think its not dynamic


You can add this to CSS:
.card {
height: 100%;
}
Or for bootstrap make it this:
<div class="card h-100">
working here: https://jsfiddle.net/e5zxqnfp/

Related

Adjust card width in bootstrap css

In the following, how do I set all cards to have same widths? I currently see some cards exceeding the specified width because of the the table it is holding. I am viewing it on a laptop.
<main role="main" class="container">
<div class="container">
<div class="main-body">
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div>
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div> <!--end of card-->
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<table class="table mb-0 table-hover">
<thead class="bg-primary">
<tr>
<th scope="col">SSSSSS</th>
<th scope="col">DDDDDD</th>
<th scope="col">FFFFFF</th>
<th scope="col">TTTTTT</th>
<th scope="col">GGGGGGGGG</th>
<th scope="col">AAAAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mb-0"><div class="col-md-1 text-secondary">String 1 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 2 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 3</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 4</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">TTTT </div></td>
<td class="mb-0">
<div class="col-sm-12">
<a class="btn btn-secondary " name="education" href="/edit/2">Edit</a>
<a class="btn btn-danger " name="education" href="/delete/2">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- stuff here-->
</div> <!--end of card body-->
</div>
</div>
</div>
</div>
</div>
</main>

How to create responsive grid with two sides?

I want something like this, but there is some problems.
My code looks like:
<style>
.red{
background-color: red;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
But result is in photo, without correction.
Each card is with title, context and icon. And context som times is longer then other which also breaks up my code.
How can I set height by each element responsive? And how to create this grid on all page height with bootstrap? What I need to modify in my code to get result what is in picture?

The h- class uses set percentages. If you want them to fill 100% of the available height, you just set it to h-100. The other side is the same way, so you can use whatever you want for that or you can do a custom percentage using CSS. h-150 isn't a valid use of these classes (remove it and you'll notice nothing changes, it just auto fits).
https://getbootstrap.com/docs/5.0/utilities/sizing/
.red {
background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="min-vh-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>

HTML body leaving a little space in the side

I was developing a virtual restaurante menu using bootstrap and i just notice that no matter what i do, my page has a little space at the right that will not be full, i used the inspect tool to see if any element was causing it but i couldn't find anything you can see what i'm talking about in the top right corner
I try setting the min-width to the body but it remains the same
body {
min-width: fit-content;
}
also tried this
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}
<body>
<nav class="navbar sticky-top navbar-dark" style="
padding-top: 0px;" id="navbarprincipal">
<div class="container-fluid navbarsubtitle" style="background-color: #0f1924;">
<div class="d-flex align-items-center align-items-stretch">
<div class="d-flex p-2 bd-highlight"><a class="schedule">Horario de atención: 9:00 a.m - 8:00 p.m</a>
</div>
</div>
</div>
<div class=" container-fluid" style="padding-bottom: 8px;">
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight ">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="" width="" height="" class="d-inline-block align-text-top">
</a>
</div>
</div>
</div>
<div class="col-8">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><a class="active">Carta</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">Ubicanos</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">¡Siguenos!</a></div>
</div>
</div>
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><i class="bi bi-person" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Iniciar Sesión"></i>
</div>
<div class="p-2 bd-highlight "><i class="bi bi-bag" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Carrito de compras"></i>
</div>
</div>
</div>
</div>
</nav>
<div class="row principalbanner align-items-center">
<div class="entregadiv" style="margin-bottom: 25px;">
<div class="col-12" style="margin-top: 20px;">
<h3 style="color: black;">¿Como quieres tu pedido</h3>
</div>
<div class="dropdown-divider"></div>
<div class="col-12">
<div class="row">
<div class="col ">
<div class="col dropdownelement">
<i class="bi bi-bicycle" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Delivery</p>
</div>
</div>
<div class="col ">
<div class="dropdownelement">
<i class="bi bi-cursor-fill" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Retirar</p>
</div>
</div>
</div>
</div>
<div class="col-12" style="margin-top: 10px;margin-bottom: 25px;">
<input type="email" class="form-control " id="exampleInputEmail1" placeholder="Ingresa tu dirección*">
</div>
</div>
</div>
<div class="container-fluid" style="padding-left: 8%;padding-right: 8%;">
<hr>
<div class="d-flex align-items-center justify-content-center">
<div class="p-2 bd-highlight"><span class="badge rounded-pill bg-danger" style="font-size: 18px;">Estamos
cerrados hasta mañana a las 9:00 a.m</span></div>
</div>
<hr>
<div class="d-flex align-items-center justify-content-center">
<div class="p-2 bd-highlight"><a class="menucategories" href="#hamburguesa">Hamburguesas</a></div>
<div class="p-2 bd-highlight"><a class="menucategories" href="#polloalabrasa">Pollos a la brasa</a></div>
<div class="p-2 bd-highlight"><a class="menucategories" href="#combos">Combos</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Bebidas</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Guarniciones</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Postres</a></div>
</div>
<hr>
<div class="d-flex align-items-center justify-content-center" style="background: url(assets/banners/2.jpg);background-size:cover;height: 180px;background-position: center bottom;position: relative;">
<div class="p-2 bd-highlight">
<h3 class="menucategoriestitle">Hamburguesas</h3>
</div>
</div>
<div class="row" id="hamburguesa">
<h1>Hamburguesas</h1>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage" onclick="overlayonproduct()">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Clasica</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/6</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburgesa bacon and cheese</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/8</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="polloalabrasa" class="d-flex align-items-center justify-content-center" style="background: url(assets/banners/3.jpg);background-size:cover;height: 180px;background-position: center bottom">
<div class="p-2 bd-highlight">
<h3 class="menucategoriestitle">Pollos a la brasa</h3>
</div>
</div>
<div class="row">
<h1>Pollos a la brasa</h1>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Pollo Entero</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/40</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Cuarto de pollo</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/16</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Pollo broaster</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/55</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Cuarto pollo broaster</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/18</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Octavo de pollo</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/12</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Octavo pollo broaster</h5>
<p class="card-text carddescription">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text cardprice">S/14</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
</div>
</div>

You have a white space on the right because your principalbanner row isn’t inside a container. Usually, the container contains the row, so the row fits the width of the display. Because you’re missing the container, your row is now wider than the display.
You can tell if something is too wide if there’s a horizontal scrollbar at the bottom of the browser window (I suspect there’s a horizontal scrollbar on your browser, but the image you provided is cutting off the bottom of the window).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-dark" style="
padding-top: 0px;" id="navbarprincipal">
<div class="container-fluid navbarsubtitle" style="background-color: #0f1924;">
<div class="d-flex align-items-center align-items-stretch">
<div class="d-flex p-2 bd-highlight"><a class="schedule">Horario de atención: 9:00 a.m - 8:00 p.m</a>
</div>
</div>
</div>
<div class=" container-fluid" style="padding-bottom: 8px;">
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight ">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="" width="" height="" class="d-inline-block align-text-top">
</a>
</div>
</div>
</div>
<div class="col-8">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><a class="active">Carta</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">Ubicanos</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">¡Siguenos!</a></div>
</div>
</div>
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><i class="bi bi-person" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Iniciar Sesión"></i>
</div>
<div class="p-2 bd-highlight "><i class="bi bi-bag" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Carrito de compras"></i>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row principalbanner align-items-center">
<div class="entregadiv" style="margin-bottom: 25px;">
<div class="col-12" style="margin-top: 20px;">
<h3 style="color: black;">¿Como quieres tu pedido</h3>
</div>
<div class="dropdown-divider"></div>
<div class="col-12">
<div class="row">
<div class="col ">
<div class="col dropdownelement">
<i class="bi bi-bicycle" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Delivery</p>
</div>
</div>
<div class="col ">
<div class="dropdownelement">
<i class="bi bi-cursor-fill" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Retirar</p>
</div>
</div>
</div>
</div>
<div class="col-12" style="margin-top: 10px;margin-bottom: 25px;">
<input type="email" class="form-control " id="exampleInputEmail1" placeholder="Ingresa tu dirección*">
</div>
</div>
</div>
</div>
I’ve revised your code to have container-fluid around your principalbanner row. To see the effect of the container, you can open the snippet full-screen and use your browser’s developer tools to turn off all of the attributes for the container. Then a scrollbar will appear at the bottom of the browser window with 24px of space on the right.

Why button is overlapping with images in css?

I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Element goes outside parrent

I'm having a little problem with my CSS.
If you run the fiddle (had to use fiddle because of StackOverflow body limit), and look at the grey background of CASES.
Then you can see that all the content of Cases is nicely inside it the grey area. But if you click on Casefamily then you will notice that the Casefamily goes outside the grey area. This covers parts of my documentation section.
How can I make the "grey" area expand to its content?
<div id="pvCases_d30dcf2a">
<div class="Cases_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="Controllers_d30dcf2a">
<input class="search_d30dcf2a" placeholder="Search..">
<div class="catchWordContainer_d30dcf2a">
<input class="catchWord_d30dcf2a" placeholder="Catchword">
<div class="catchWordSuggestion_d30dcf2a"></div>
</div>
<div class="dropdown_d30dcf2a">
<div class="selected_d30dcf2a">
<span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
</div>
<div class="options_d30dcf2a" style="display: none;">
</div>
</div>
<div class="rightContainer_d30dcf2a">
<button type="button" id="SaveSearchResult">Save</button>
<div class="SearchCollection_d30dcf2a">
<div class="selected_d30dcf2a">
<span> </span><i class="fa fa-caret-down"></i>
</div>
<div class="SearchCollectionOptions_d30dcf2a">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="CaseTable_d30dcf2a">
<table class="table table-striped">
<thead>
<tr>
<th><span>Case Title</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Case Number</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Status</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Catchword</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="option_container_d30dcf2a">
<i class="fa fa-cog cog_d30dcf2a"></i>
<div class="cog_options_d30dcf2a">
<div class="row"></div>
<button class="SettingTableOptions_d30dcf2a">Save</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-content="{"Id":1,"Title":"Feed for salmonids","Case_Number":"P47931PC01","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC01","Inventor":"Konfab","Description":"<div class=\"ExternalClass4AF54D6F770C4D72987907C1A07DEA48\"><p>​Something<br><br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":1}">
<td>Feed for salmonids</td>
<td>P47931PC01</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC01</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
<p>​Something<br><br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
<tr data-content="{"Id":2,"Title":"case test","Case_Number":"P47931PC02","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC02","Inventor":"Konfab","Description":"<div class=\"ExternalClass3E913664A3344C909C30924BD9212012\"><p>​Something​<br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":2}">
<td>case test</td>
<td>P47931PC02</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC02</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass3E913664A3344C909C30924BD9212012">
<p>​Something​<br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
</div>
</div>
</div>
</div>
<div class="CaseDetails_d30dcf2a" style="display: block;">
<div class="return_d30dcf2a">
<span> Cases / </span><span>Feed for salmonids</span>
</div>
<div class="CaseDetailContainer_d30dcf2a">
<ul class="tabs_d30dcf2a group">
<li><a class="active_d30dcf2a">Case details</a></li>
<li><a class="">Casefamily</a></li>
</ul>
<div class="box_wrap_d30dcf2a">
<div class="active_d30dcf2a">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Case Number</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Status</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Filed</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Type</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Parent</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Family</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Test</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Country</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Denmark</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Title</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Feed for salmonids</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Applicant/Proprietor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Inventor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Konfab</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Description</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">​Something</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Classes</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">dunno</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Appl. date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Reg. Date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Next Renewal</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Abandoned date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Division (subdivision)</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
</div>
</div>
<div class="col-md-3">
<img>
</div>
</div>
</div>
<div class="Casefamily_d30dcf2a">
<table class="table">
<thead>
<tr>
<th>
Case No
</th>
<th>
Name
</th>
<th>
Applicant/Proprietor
</th>
<th>
Appl. date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr class="status_d30dcf2a Filled_d30dcf2a">
<td>
T62039EU02
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Filed
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU03
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Pending_d30dcf2a">
<td>
T62039EU04
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Pending
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU05
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU06
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU07
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

replace position: absolute with position: relative, it will expand parent element
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
position: relative;
}

Hello Peter it doesn't respect the parent because it is a table, and tables are not responsive. The best solution is to make the parent div to have a CSS attribute of overflow-x : scroll, to enable people to view all the content and to contain you content.
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a
.box_wrap_d30dcf2a>div{
overflow-x : scroll;
}