Div's moving out of alignment when HREF added

Question

I have a row of three images that should be centre aligned and therefore line up with the corresponding divs's below. Each image is in its own Div. They were aligning perfectly, however, when I add an HREF to them, they all just move to the left and I don't understand why. Could someone shed some light on how to fix this?

The JSfiddle: https://jsfiddle.net/DcoltGaming/ap2jd1xh/7/

The HTML:

<div class="contactUsContainer">
            <a href="">
    <div class="ContactUsBox"> 
         <img src="https://img.icons8.com/plasticine/48/000000/phone.png">
    </div>
            </a>


    <a href="">
    <div class="emailIconBox">
    <img src="https://img.icons8.com/nolan/48/email.png">
          </div> 
          </a>


                 <a href="">
              <div class="IMBox"> 
         <img src="https://img.icons8.com/android/48/000000/computer.png">
    </div>  
  </a>


          </div>   

        <div class="contactUsMethodInfoContainer">
              <div class="phoneInfo">
                  <p>Some info about a phone.</p>
              </div>

              <div class="IMInfo">
                  <p>Some info about Social media</p>
              </div>

              <div class="emailInfo">
                  <p>Some info about emails.</p>
              </div>
          </div>

The CSS

 .contactUsContainer{
    display: flex;
    align-items: center;
    height: 100%;
}

.ContactUsBox{
    width: 25%;
    height: 100%;
    margin: auto;
}


.emailIconBox{
    width: 25%;
    height: 100%;
    margin: auto;
}

.IMBox {
    width: 25%;
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

Answer 1

Since you're using display: flex, may I suggest you ditch the widths all together and instead rely on flexbox properties to handle your layout?

It's as simple as adding justify-content: space-around; to get your desired effect:

https://jsfiddle.net/cu5k70e4/

CSS (widths removed on children, justify-content applied at parents):

.contactUsContainer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.ContactUsBox{
    height: 100%;
    margin: auto;
}


.emailIconBox{
    height: 100%;
    margin: auto;
}

.IMBox {
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}