Centering a div containing multiple images inside another div - html

Question

I am having problems trying to center a div containing four contact images inside of another div. The following is my HTML code for it:
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="images/facebook.png" alt="Facebook"></img>
<img class="contactImg" src="images/instagram.png" alt="Instagram"></img>
<img class="contactImg" src="images/twitter.png" alt="Twitter"></img>
<img class="contactImg" src="images/snapchat.png" alt="Snapchat"></img>
</div>
</div>
And the CSS is
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
}
img.contactImg {
width:50px;
height:50px;
display: inline-block;
margin: 0 auto;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
What could I do to fix this? Thank you.

Answer 1

Let me know if this is not what you are trying to achieve. Your question was a little vague but this is what I took from it.
div#contact {
border: 1px solid red;
width: 100%;
}
div#centeredConctact {
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
margin:4px 1px 1px;
}
a.contactImg {
text-decoration:none;
}
div.infoSection {
margin-top: 15px;
padding: 0;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email">-->
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=F" alt="Facebook">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=I" alt="Instagram">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=T" alt="Twitter">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=S" alt="Snapchat">
</div>
</div>

Answer 2

The div is already centered.
Center the images (respectively the links) with text-algin: center.
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
border: 1px solid;
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat">
</a>
</div>
</div>

Answer 3

Try using flaxbox layout like this:
div#contact {
border: 1px solid red;
display: flex;
justify-content: center
}
img.contactImg {
width: 50px;
height: 50px;
margin: 3px 1px 0;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="http://placehold.it/50x50" alt="Facebook"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Instagram"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Twitter"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Snapchat"></img>
</div>
</div>