Как выровнять мой край div на основе другого div?

Question

В настоящее время мне было сложно выровнять div на основе другого div

Вот мой текущий вывод.

Но когда вы уменьшаете экран, я хочу, чтобы он оставался таким же.

Но это дает мне что-то вроде этого

Причина почему это сложно для меня, потому что навигационная панель отличается от advanced king air div

Вот навигационная панель HTML CSS

 <header>
 <nav class="jet-nav navbar justify-content-between">
<div class="jet-nav-content container">
<a class="navbar-brand" href="{{ url('/') }}">
    <img src="{{ asset('public/images/header/jetaero-logo.png') }}" class="jet-brand" alt="GNF logo">
</a>
<form class="form-inline jet-contact">
    <a href="#" class="circle-icon"><i class="fab fa-facebook"></i></a>
    <a href="#" class="circle-icon"><i class="fab fa-instagram"></i></a>
    <button class="btn btn-primary btn-black" id="callusNav">
        <small><i class="fas fa-phone"></i>&nbsp;&nbsp;619-562-1950</small></button>
 </form>
 </div>
 </nav>
 </header>

CSS

.jet-nav {
background: transparent !important;
width: 100% !important;
}
.jet-nav-content {
margin-left: 15% !important;
margin-right:15% !important;
margin:0 auto !important; 
}

А вот Div среднего содержимого

<div class="jet-header">
                            <h2 class="">
                                ADVANCED KING AIR
                                <br>
                                PILOT TRAINING FACILITY
                            </h2>
                            <p class="p-audiowide">
                                THE HIGHEST QUALITY GROUND INSTRUCTION
                                <br>
                                BACKED UP BY ON-SITE SIMULATOR TRAINING
                            </p>
                            <button class="btn btn-primary btn-black margin-right btn-hover">
                                <small><i class="fas fa-phone"></i>&nbsp;CALL US</small>
                            </button>
                            <button class="btn btn-primary btn-black btn-hover">
                                <small><i class="fas fa-envelope"></i>&nbsp;EMAIL US</small>
                            </button>

                            <div class="jet-info">
                                <h6>IMPORTANT NOTICE :</h6>
                                <p>
                                    In response to COVID-19, Jet Aero is taking
                                    precautionary measures to keep all pilots
                                    and staffs safe. All operations are being
                                    conducted with social distancing guidelines
                                    in place by the state of California. Your
                                    training experience will not be
                                    compromised
                                </p>
                            </div>
                        </div>

CSS

.jet-header {
width: auto !important;
}
@media only screen and (min-width: 1399px) {
.jet-header {
    margin-left: 12%;
}
}
@media only screen and (max-width: 1399px) {
.jet-header {
    margin-left: 30px;
}
}

Примечание: только часть Advanced king air текст, который я хочу сделать. Но не часть Important Notice

ОБНОВЛЕНИЕ Пробовал ответ, но это происходит

Answer 1

Просто добавьте общий класс для div-оболочки и отрегулируйте ширину этого класса, чтобы они выглядели правильно, например, не используйте поля слева и справа

.container{
width:80%;
margin:auto;
}

Используйте это как общий контейнер для обоих Навигация и содержание и не включают div уведомления внутри контейнера