title: How to align my div margin based on other div?
body: <p>Currently it's been tricky for me to align divs based on the other div</p>
  
  <p>Heres my current output.</p>
  
  <p><a href="https://i.stack.imgur.com/ioEO8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ioEO8.jpg" alt="enter image description here"></a></p>
  
  <p>But when you zoom out the screen I want it to stay the same.</p>
  
  <p>But this gives me something like this</p>
  
  <p><a href="https://i.stack.imgur.com/46r9b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/46r9b.jpg" alt="enter image description here"></a></p>
  
  <p>The reason why it's tricky for me because navbar is different div from the <code>advanced king air</code> div</p>
  
  <p>Here's the navbar HTML CSS</p>
  
  <pre><code> &lt;header&gt;
   &lt;nav class="jet-nav navbar justify-content-between"&gt;
  &lt;div class="jet-nav-content container"&gt;
  &lt;a class="navbar-brand" href="{{ url('/') }}"&gt;
      &lt;img src="{{ asset('public/images/header/jetaero-logo.png') }}" class="jet-brand" alt="GNF logo"&gt;
  &lt;/a&gt;
  &lt;form class="form-inline jet-contact"&gt;
      &lt;a href="#" class="circle-icon"&gt;&lt;i class="fab fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href="#" class="circle-icon"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;button class="btn btn-primary btn-black" id="callusNav"&gt;
          &lt;small&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;619-562-1950&lt;/small&gt;&lt;/button&gt;
   &lt;/form&gt;
   &lt;/div&gt;
   &lt;/nav&gt;
   &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.jet-nav {
  background: transparent !important;
  width: 100% !important;
  }
  .jet-nav-content {
  margin-left: 15% !important;
  margin-right:15% !important;
  margin:0 auto !important; 
  }
  </code></pre>
  
  <p>And here's the Middle content div</p>
  
  <pre><code>&lt;div class="jet-header"&gt;
                              &lt;h2 class=""&gt;
                                  ADVANCED KING AIR
                                  &lt;br&gt;
                                  PILOT TRAINING FACILITY
                              &lt;/h2&gt;
                              &lt;p class="p-audiowide"&gt;
                                  THE HIGHEST QUALITY GROUND INSTRUCTION
                                  &lt;br&gt;
                                  BACKED UP BY ON-SITE SIMULATOR TRAINING
                              &lt;/p&gt;
                              &lt;button class="btn btn-primary btn-black margin-right btn-hover"&gt;
                                  &lt;small&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;&amp;nbsp;CALL US&lt;/small&gt;
                              &lt;/button&gt;
                              &lt;button class="btn btn-primary btn-black btn-hover"&gt;
                                  &lt;small&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt;&amp;nbsp;EMAIL US&lt;/small&gt;
                              &lt;/button&gt;
  
                              &lt;div class="jet-info"&gt;
                                  &lt;h6&gt;IMPORTANT NOTICE :&lt;/h6&gt;
                                  &lt;p&gt;
                                      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
                                  &lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  }
  </code></pre>
  
  <p>Note: Just the portion of <code>Advanced king air</code> text that I want to do it. But not the portion of <code>Important Notice</code></p>
  
  <p><strong>UPDATE</strong>
  Tried the answer but this happens</p>
  
  <p><a href="https://i.stack.imgur.com/VH3x9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VH3x9.png" alt="enter image description here"></a></p>