父div内的子Div高度不相同

Question

在最大宽度为910px时，＃one位于#two上方，并且背景尺寸彼此匹配。我正在努力弄清楚为什么当最小宽度为910px且#one位于#two的左侧时，背景尺寸无法匹配，并且#one变得垂直较短，从而导致内部图像未与#two垂直对齐。

<script>
      function classToggle() {
        const navs = document.querySelectorAll('.Navbar__Items')

        navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
      }

      document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);

      function initMap() {
        var location = {
          lat: -25.363,
          lng: 131.044
        };
        var map = new google.maps.Map(document.getElementById("map"), {
          Zoom: 4,
          center: location
        });
      }

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYzXj5wF4L6mChyyc5xwfb2QT1QEZ9VN8&callback=initMap">


    </script>
<!-- begin snippet: js hide: false console: true babel: false -->

body {
  position: relative;
  height: 100vh;
  margin: 0px;
  background-color: #f4f4f4;
  color: #444;
  font: .9em Arial, sans-serif;
}

.Navbar {
  background-color: white;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  justify-content: space-between;
  z-index: 2;
}

.Navbar__Link {
  padding-right: 32px;
  color: #185b9b;
}

.Navbar__Link-toggle a {
  padding: 16px;
}

.Navbar__Items--right a {
  margin-right: 32px;
}

.Navbar__Dropdown {
  color: #185b9b;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
  .Navbar__Dropdown {
    padding: 16px 0px 0px 0px;
    color: #185b9b;
  }
}

---------------- 

.main {
  height: 100%;
}

.logo {
  max-height: 15px;
  max-width: 160px;
}

.header {
  height: 200px;
  padding: 60px 0px 10px 0px;
  margin: 40px;
}

.wrapper {
  box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: white;
  margin: 40px;
}

#one {
  float: left;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  min-height: 130px;
  background: blue;
}

#one img {
  max-height: 25px;
  max-width: 160px;
}

#map {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 750px;
  width: 50%;
  height: 100%;
  z-index: 1;
}

#two {
  overflow: hidden;
  margin: 10px;
  min-height: 130px;
  background: blue;
}


@media screen and (max-width: 910px) {
  #one {
    float: none;
    margin-right: 10;
    width: auto;
    border: 0;
  }
  #map {
    float: none;
    margin-right: 10;
    width: auto;
    border: 0;
  }
}

.container {
  max-width: 800px;
  height: 600px;
  margin: 40px auto;
  padding: 0px 40px 40px 40px;
}

h1 {
  text-align: center;
  letter-spacing: 1px;
  font-size: 45px;
  margin: 0px 0px 20px 0px;
  color: #185b9b;
}

.input,
.msg .area {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 25px;
  border: 2px solid #e9eaea;
  font-size: 14px;
  border-radius: 5px;
  outline: none;
  transform: all 0.5s ease;
}

.login .input {
  width: 48%;
  float: left;
  margin-right: 4%;
}

.login .input:last-child {
  margin-right: 0;
}

.enter {
  padding: 40px;
  border-top: 2px solid #e9eaea;
  background-color: #f9f9f9;
  color: #fff;
  margin: -40px;
}

.enter .btn2 {
  width: 48%;
  float: left;
  margin-right: 4%;
}

.enter .btn2:last-child {
  margin-right: 0;
}

.msg .area {
  height: 200px;
}

.btn {
  background: #185b9b;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  margin: 0 auto;
  margin-bottom: 25px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.btn2 {
  color: #185b9b;
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  cursor: pointer;
}

a:link {
  text-decoration: none;
  color: #185b9b;
}

a:visited {
  text-decoration: none;
  color: #185b9b;
}

a:hover {
  text-decoration: none;
  color: #4085bf;
}

a:active {
  text-decoration: none;
  color: #185b9b;
}

.input:focus,
.msg .area:focus {
  border: 2px solid #486255;
}

::-webkit-input-placeholder {
  font-family: 'roboto';
}

.footer {
  margin: 40px;
}

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  </head>

  <body>
    <div class="Navbar">
      <div class="Navbar__Link Navbar__Link-brand">
        <a href="#home" class="active"><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" /></a>
      </div>
      <div class="Navbar__Link Navbar__Link-toggle">
        <a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
  </a>
        <i class="fas fa-bars"></i>
      </div>
      <nav class="Navbar__Items">

      </nav>
      <nav class="Navbar__Items Navbar__Items--right">
        <div class="Navbar__Dropdown">
          <a href="#ContactUs">Contact Us</a>
        </div>
        <div class="Navbar__Dropdown">
          <a href="/images/myw3schoolsimage.jpg" download>Downlaod PDF</a>
        </div>
      </nav>
    </div>
    <div class="main">

      <div class="header">
        <h2>LOREM IPSUM</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
          ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..
        </p>

        <p>
          Fixed bar The Worl'd Finest?
        </p>
      </div>


      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>




      <div id="ContactUs" class="wrapper">
        <div id="map"></div>
        <div id="two">
          <div class="container">
            <h1>Let's work together.</h1>

            <div class="login">
              <input type="text" placeholder="Your Name" class="input">
              <input type="text" placeholder="Your Email Address" class="input">
            </div>

            <div class="subject">
              <input type="text" placeholder="Subject" class="input">
            </div>

            <div class="msg">
              <textarea class="area" placeholder="Leave a Message"></textarea>
            </div>

            <div class="btn">Send Message</div>

            <div class="enter">
              <div class="btn2"><a href="tel:800-922-0204" class="icon">
              Call 1-800-922-0204</a></div>
              <div class="btn2"> <a href="/images/myw3schoolsimage.jpg" download>Downlaod PDF</a></div>
            </div>
          </div>
        </div>
      </div>


      <div class="footer">
        <p>Copyright © 2019 Logo Name, LLC. All Rights Reserved</p>
        <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </div>

    </div>

  </body>
  
  </html>