Problems with fixed header and section - html

Question

I am trying to create a sticky header. I have used the bootstrap fixed-top class and it works.
The problem comes when I change the device from pc to tablet since the section stays behind the fixed header.
I have tried to put a fixed padding-top to the section but changing the size of the header when changing from PC to tablet does not work.
My header:
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="overflow: hidden">
<div class="container-fluid">
<div>
<div>
<div class="badge bg-primary text-wrap">
<p>{{(datosEmpresaTaller | async).empresa}}</p>
</div>
</div>
<div style="margin-top: 10px">
<div class="badge bg-primary text-wrap">
<p>{{(datosEmpresaTaller | async).taller}}</p>
</div>
</div>
</div>
<form class="d-flex">
<button class="btn btn-outline" type="submit" routerLink='/dashboard'> <img src="assets/icons/menu.png"
alt="Cerrar Sesión" height="80" width="100" /></button>
</form>
</div>
</nav>
</header>
My section:
<div>
<section class="section" style="background-image: url('assets/img/cambiar-ruedas.png'); -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat; min-height: calc(100vh);">
<div class="container-fluid">
<div class="left" type="button"> <img src="assets/icons/boton-actualizar.png" alt="Actualizar"
height="50" width="70" style="margin-top: 2%;" HSPACE="10" VSPACE="10"> <img src="assets/icons/atras.png" alt="atras"
height="50" width="70" style="margin-top: 2%;" HSPACE="10" VSPACE="10" routerLink='/picking-orders-zones'></div>
</div>
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-primary table-striped" id="myTable" style="margin-top: 1%;">
<thead>
<tr>
<th>Orden:</th>
<th>Zona:</th>
<th>Agencia:</th>
<th>Pendiente:</th>
</tr>
</thead>
</table>
</div>
</div>
My css:
.section {
margin: 0;
padding: 0;
padding-top: 80px;
}
I need the section to stay fixed under the head regardless of the view.

Answer 1

Try bootstrap class called 'sticky-top'.
<div class="sticky-top">...</div>
Or "responsive sticky top" in bootstrap.
bootstrap docs.
To keep the main content bumped down below the header info.