I have this page that includes navbar, header, heading and breadcrumb. I want to align the breadcrumb with the header so that the breadcrumb is completely above the middle of the header, and I want to align both of them together so that they are under the navbar and at the bottom and middle of the header. I want that without exaggerating the use of margin and padding.
I want the final result to seem like that without paying attention to the difference in position of navbar brand between this pic and the first one:
header { position: relative; background-image: url("../images/Group.jpg"); background-position: center; background-size: cover; height: 300px;}nav { position: absolute; top: 50px; height: 90px; background-color: white;}.navbar-toggler { z-index: 5000;}.navbar-collapse.show { background-color: papayawhip;}.collapse { z-index: 7000;}.image { width: 150px;}.image img { max-width: 150px;}.nav-item { display: flex; align-items: baseline; align-items: center; color: #424752; font-family: 'Cairo'; font-size: 12px; font-weight: 900;}.interactive { margin-top: 55px;}@font-face { font-family: 'Cairo'; src: url('../fonts/static/Cairo-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}#login { color: #bf9e66;}.fb { text-decoration: none; color: #232528;}.sb { text-decoration: none; color: #B1B0B0;}.breadcrumb-item+.breadcrumb-item::before { color: #B1B0B0;}.breadcrumb { display: flex; align-items: center;}.bread { margin-top: 20px; margin-left: 20px;}.punderheader { text-align: right;}#additional { font-family: 'Cairo'; font-weight: 600; color: black; text-indent: 286px; margin-left: 50px; width: 100%;}.main { width: 50%; margin: 50px auto;}#searchb { border-color: #D7DAE2; border-top-left-radius: 24px; border-bottom-left-radius: 24px;}#form-control { text-align: end; border-top-right-radius: 24px; border-bottom-right-radius: 24px;}.input-group { position: relative; height: 50px;}#bar { display: flex; position: absolute; justify-content: flex-start; transform: translateY(-50%); left: 65px; top: 50%;}.ci { opacity: 0.1; background-position: center; background-size: cover;}.general { text-align: end; position: relative; width: fit-content; border-bottom-right-radius: 17px; border-top-left-radius: 17px; border-left-width: 3px; border-left-color: #CEAC6A; z-index: 100;}#clipboard { border: 2px solid #DDDDDC; background-color: white; padding: 15px 17px 15px 17px; border-radius: 11px;}.standard { margin-top: 60px;}.card-icons { position: absolute; top: 15px; display: flex; justify-content: space-between; width: 90%;}#arrow { margin-top: 10px;}.row { display: flex; justify-content: space-around;}.card-title { font-weight: 900;}.card p { font-size: 14px; margin-bottom: 17px;}.alone { margin-top: 25px;}.feedback { margin-top: 37px; text-align: center;}.feedback p { color: #85888F;}#fbg { text-align: center; border: 2px solid #F8E5F6; background-color: #F9F7ED; color: #B68A35; padding-left: 17px; padding-right: 17px; text-decoration: none; font-family: Cairo, sans-serif; font-size: 16px; border-radius: 10px; margin-top: 30px;}#fbn { text-align: center; border: 2px solid #F8E5F6; background-color: transparent; color: #B68A35; padding-left: 20px; padding-right: 20px; text-decoration: none; font-family: Cairo, sans-serif; font-size: 16px; border-radius: 10px; margin-top: 30px;}footer { display: flex; flex-direction: column; align-items: center; background-image: url('../images/Component.jpg'); background-position: center; background-size: cover;}.containimg { width: 200px;}.containimg img { max-width: 200px;}.first { color: #BF9E66; font-size: 20px;}.rest { color: #3E4046; font-size: 16px;}p,h1,h2,h3,h4,h5,h6,span { font-family: 'Cairo';}.lastupd { color: #AAADB3;}.inside { text-align: center; display: flex; justify-content: center;}.social { margin-right: 20px;}#thu { margin-right: 10px;}#thd { margin-right: 10px;}#yes { color: #B68A35;}#no { color: #B68A35; font-size: 17px;}<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css" rel="stylesheet"></head><body><header><div class="container"><nav class="navbar navbar-expand-xl major"><div class="container-fluid"><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand image" href="#"><img src="./images/image.jpg"></a><div class="collapse navbar-collapse" id="navbarTogglerDemo01"><ul class="navbar-nav items"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#"><span>الرئيسية</span></a><span class="fa-solid fa-house" style="color: #5f646d;"></span></li><li class="nav-item"><a class="nav-link" href="#">مننحن</a></li><li class="nav-item"><span class="fa-solid fa-chevron-down" style="color: #424752;"></span><a class="nav-link" href="#">خدماتنا</a></li><li class="nav-item"><span class="fa-solid fa-chevron-down" style="color: #424752;"></span><a class="nav-link" href="#">المركزالإعلامي</a></li><li class="nav-item"><span class="fa-solid fa-chevron-down" style="color: #424752;"></span><a class="nav-link" href="#">إحصاءاتعجمان</a></li><li class="nav-item"><span class="fa-solid fa-chevron-down" style="color: #424752;"></span><a class="nav-link" href="#">البياناتالتفاعلية</a></li><li class="nav-item"><span class="fa-solid fa-chevron-down" style="color: #424752;"></span><a class="nav-link" href="#">الإصدارات</a></li><li class="nav-item"><a class="nav-link" href="#" id="login">تسجيلالدخول</a></li><li class="nav-item"><a class="nav-link" href="#"><span>عربي</span></a><span class="fa-sharp fa-solid fa-flag" style="color: #424252;"></span></li><li class="nav-item"><a class="nav-link" href="#"><span class="fa-solid fa-magnifying-glass" style="color: #424252;"></span></a></li><li class="nav-item"><a class="nav-link" href="#"><span class="fa-solid fa-gear" style="color: #424252;"></span></a></li></ul></div></div></nav><script> const toggleButton = document.querySelector('.navbar-toggler'); const breadcrumb = document.querySelector('.breadcrumb'); const breaded = document.getElementById('breaded'); toggleButton.addEventListener('click', function() { const navbarCollapse = document.getElementById('navbarTogglerDemo01'); if (navbarCollapse.classList.contains('show')) { breadcrumb.style.display = 'block'; bread.style.display = 'block'; } else { breadcrumb.style.display = 'none'; bread.style.display = 'none'; img.style.display = 'none'; main.style.display = 'none'; } });</script><div class="grid gap-0 row-gap-3 position-absolute top-50 start-50 translate-middle breaded"><div class="p-2 g-col-12 bread"><nav style="--bs-breadcrumb-divider: '<';" aria-label="breadcrumb" class="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item "><a class="fb" href="#">البياناتالتفاعلية</a></li><li class="breadcrumb-item "><a class="sb" href="#">الرئيسية</a></li></ol></nav></div><div class="p-2 g-col-12 interactive"><h1>interactive data</h1></div></div></header><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script></body></html>