Image and text alignment

Question

I'm having a bit of an issue. I am trying to align my contact logos to the left of my contact information using Bootstrap. I cant seem to get the image and contact info aligned at all. The contact logos are not aligned.

I recently gave them all a class of "Images" and tried to 'text-align' but no luck.

Any help with be greatly appreciated.

.jumbotron .container-contact {
    background: rgba(236,233,233,0.4);
    padding: 2rem;
    color: white;
    box-shadow: 5px 5px 5px black;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: inline;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
  text-decoration: none;
  list-style: none;
  color: #fff;
  text-shadow: 0 0 0 #000;
}

.phone,
.mail,
.twitter,
.linkedin {
	margin-left: 50px;
    margin-right: 25px;
    margin-bottom: 1rem;
}

.images {
    padding-right: 2rem;
}

<div class="jumbotron jumbotron" id="contact"> 
              <div class="container container-contact"> 
                <h2 class="contact text-danger mb-4">contact</h2> 
                <ul class="contact-info">
                  <li class="phone"><a href="tel:555-555-5555"><img src="img/phone-call.png" class="images">555-555-5555</a></li>
                  <li class="mail"><a href="xxxx.com" target="_blank"><img src="img/envelope.png" class="images">ec.com</a></li>
                  <li class="twitter"><a href="" target="_blank"><img src="img/twitter.png" class="images">@ec77</a></li>
                  <li class="linkedin"><a href="" target="_blank"><img src="img/linkedin.png" class="images">Name</a></li>
                </ul>
              </div>
            </div>

Answer 1

I have taken a different approach to solving your problem. When you are writing css try to find the cleanest and simplest solution to achieve your aim.

I hope this helps! :)

/*Default styles*/

* {
  margin: 0px;
}

/*Navigation styles*/

#contact {
  padding: 20px;
  background-color: rgba(236, 233, 233, 0.4);
  box-shadow: 5px 5px 5px #000;
  color: #fff;
}

h2 {
  display: inline-block;
  margin-right: 10px;
}

#contact ul {
  display: inline-block;
  padding: 0px;
}

#contact ul li {
  display: inline-block;
}

<div class="jumbotron jumbotron" id="contact"> 
              <div class="container container-contact"> 
                <h2 class="contact text-danger mb-4">contact</h2> 
                <ul class="contact-info">
                  <li class="phone"><a href="tel:555-555-5555"><img src="img/phone-call.png" class="images">555-555-5555</a></li>
                  <li class="mail"><a href="xxxx.com" target="_blank"><img src="img/envelope.png" class="images">ec.com</a></li>
                  <li class="twitter"><a href="" target="_blank"><img src="img/twitter.png" class="images">@ec77</a></li>
                  <li class="linkedin"><a href="" target="_blank"><img src="img/linkedin.png" class="images">Name</a></li>
                </ul>
              </div>
            </div>