Проблема с вашим кодом проста. Существует определенный набор 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>
выполнение этого дает центрированное представление, к которому вы стремились:
Root cause of the issue you are facing :
You are setting custom values to attributes like margins, width, padding to name a few which is causing inconsistency in the layout. This is more of an architectural issue where you can fix this using the methods I illustrate below.
What you can do to improve the situation?
Suggestion 1:
try to define a универсальный CSS правило например:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Предложение 2: Заключите все свои div в родительский тег, например <body> [Просто пример . Это может быть тег раздела, тег статьи. Я просто беру пример, так как не вижу здесь вашего полного кода 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;
}