当我运行您的代码时，在大屏幕尺寸上，容器是以之字形顺序垂直排列的，当我减小屏幕尺寸时，它们也是以之字形顺序排列的。 我所理解的是，当屏幕尺寸变窄时，您希望文本容器从同一列开始垂直排列，而当屏幕尺寸变宽时，您希望文本容器以之字形排列。

在这种情况下，下面是代码（使用媒体查询:https://www.w3schools.com/css/css_rwd_mediaqueries.asp)或教程:(https://www.youtube.com/watch?v=3tlb3i7gb38&list=pl4cuxegkcc9g9vh9maa-xknfjswznpzfw)

CSS:

/* for narrow screen size : stack fashion */
        @media only screen and (max-width: 768px) {
            #container_left, #new_container_left {
                background-color: whitesmoke;
                width: 40%;
                padding: 11px 30px 15px 30px;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                margin-top:20px;
            }
            #container_right, #new_container_right {
                background-color: whitesmoke;
                width:40%;
                padding: 11px 30px 15px 30px;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                margin-right:5%;
                margin-top:20px;
            }

        }

/* for wider screen sizes : zig-zig fashion */
        @media only screen and (min-width: 768px) { 
            #center_container {
                background-color: whitesmoke;
                float: left;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-left:9%;
                margin-top:10px;
            }
            #container_left ,#new_container_left {
                float: left;
                background-color: whitesmoke;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-left: 9%;
                margin-top:20px;
            }
            #container_right, #new_container_right {
                float: left;
                background-color: whitesmoke;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-right:5%;
                margin-top:20px;
            }
       }

代码的问题很简单。 有一些CSS属性在缺省情况下没有定义，并且只为每个类声明。

要说明修复程序，请尝试将所有id的类更改为center_container

<div id="center_container">
  <h1>About us</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="center_container">
  <h1>Our Services</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="center_container">
  <h3 style="text-align: center">Aerial Photography Solutions</h3>
  <img style="margin-left:20px" src="https://www.adorama.com/alc/wp-content/uploads/2017/10/shutterstock_368306438-1-825x465@2x.jpg" height="50%" width="90%"><br><br>
</div>
<div id="center_container">
  <h3 style="text-align:center">Ground Penetrating Radar Solutions</h3>
  <img style="margin-left:20px" src="https://plsservices.com.au/wp-content/uploads/2017/10/drone-GPR.jpg" height="50%" width="90%">
</div>
<div id="center_container">
  <h3 style="text-align:center">Thermal Solutions</h3>
  <img style="margin-left:20px" src="https://www.amelioronslaville.com/wp-content/uploads/2017/02/camera-thermique-radiometrique-pour-drone.jpg" height="50%" width="90%">
</div>
<div id="center_container">
  <h3 style="text-align:center">Aerial Survey and Mapping Solutions</h3>
  <img style="margin-left:20px" src="https://www.morningagclips.com/wp-content/uploads/2017/04/MOD-79047_DroneDeploy-FieldScannerJPG.jpg" height="50%" width="90%">
</div>

</html>

这样做会产生一个你一直努力追求的中心观点:

您面临的问题的根本原因:

您正在为边距，宽度，填充等属性设置自定义值，这会导致布局不一致。 这更多的是一个体系结构问题，您可以使用下面说明的方法来解决这个问题。

你能做些什么来改善这种情况？

建议一:

尝试定义一个通用CSS规则，如:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

建议2:将所有的div括在一个父标记中，比如[只是一个例子，它可以是section标记，article标记。我只是举个例子，因为我在这里没有看到完整的HTML代码]

并将该标记的默认属性应用于:

body{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

更新:

我做了更多的修补给你一个精确的解决方案。 您可以尝试以下CSS，它现在应该可以工作了

*{
  width: 81.4%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-top: 11px;
  margin-left: 20px;
  font-family: 'Open Sans';
}

#center_container {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  margin-top: 10px;
}

#container_left {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-top: 20px;
}

#container_right {
  background-color: whitesmoke;
  width: 40%;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 5%;
  margin-top: 20px;
}

#new_container_left {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-top: 20px;
}

#new_container_right {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 9%;
  margin-top: 20px;
}