I have issue with my css - html

Question

I have currently 4 widgets witch have their own sizes. I have placed them within a main div called #box I get them centered by reducing the width to about 60% and having margin left and right on auto. If I zoom out in my browser the widget blocks moves more to the left and does not stay centered.
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->
#Box
{
background-color:#CCCCCC;
width:60%;
margin-left:auto;
margin-right:auto;
}
Image before zooming browser out
Image after zooming out

Answer 1

The problem is that the container of your images itself is indeed centred, but the images are aligned to the left of that container. If you gave the #box a different background color, you'd see that immediately.
Try giving the #Box element a center, and then center the inside elements as well.
Since you are using <div> elements, I'd go for float: left and giving each element a specific width property. I'd rather go with an inline-block element because it's easier to center, and because you only have images which are naturally inline-block, but this is not what you have implemented.
Check out this fiddle: https://jsfiddle.net/abvt8ekj/
And the snippet:
.container {
background-color: #ee55cc;
}
#Box{
background-color:#CCCCCC;
width:60%;
margin-left:auto;
margin-right:auto;
}
#Box:after {
display: block;
content: "";
clear: both;
}
.Certificate {
width: 25%;
float: left;
overflow: hidden;
}
.Certificate ul,
.Certificate li {
margin: 0;
padding: 0;
}
<div class="container">
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->
</div>

Answer 2

If you don't want to specify a width to your main box, you can use the text-align property :
text-align:center;
Here's a Fiddle with a little demo : https://jsfiddle.net/valentinho14/cst30wuc/

Answer 3

Try instead of using the div called #box be in the center of the page, put another div inside #box1 and align that second div in the center.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#box1{
background-color:black;
}
#box2{
margin:auto;
background-color:green;
width:50px;
height:50px;
display:block;
align:center;
}
</style>
</head>
<body>
<div id = "box1">
<div id = "box2"></div>
</div>
</body>
</html>
That did it for me, and even if you zoom in or out the div will stay in the center. Just put the images into the second div. Take care.

Answer 4

you can try doing it with flexbox like this it will always stay in the center!
and if you dont want the list-style-type dont forget to put padding-left:0px; to the ul's because by default ther is a padding :40px;
#Box{
display:flex;
justify-content:center;
}
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->