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. Note that I use bootstrap and I want that without exaggerating the use of margin and padding. Please help me with this and I would be very grateful.
this is how the elements seems:
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:
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="./css/bootstrap.min.css" rel="stylesheet"><link href="./icons/all.css" rel="stylesheet"><link href="./css/mystyles.css" rel="stylesheet"></head><body><header><div class="container"><nav class="navbar navbar-expand-xl "><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><div><nav style="--bs-breadcrumb-divider: '<';" aria-label="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><h1>Interactive data</h1></nav></div></header></div><script src="./js/popper.min.js"></script><script src="./js/bootstrap.bundle.min.js"></script></body>