Contact section wont centralize - html

Question

Updated Position I have a problem I can't seem to centralize my contact information. Below is the code I have that pushes all the small logos with the text to the side of the webpage.
However, my final goal is to have them placed in one line. Any help is welcome!
.media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.media-body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>[phone]</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>

Answer 1

Here you are using flexbox. If you want all children to be in one line.
Just wrap around one more div to all and give it display:flex
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media-wrapper">
<div class="media contact-info"></div>
<div class="media contact-info"></div>
<div class="media contact-info"></div>
</div>
</div>
</section>
and then add following css
.media-wrapper {
display:flex;
}
https://codepen.io/ksilentstorm/pen/eYmeXvr
For knowledge purpose
Just adjust child elements by putting following lines in parent css that is .media-wrapper.
For horizontal alignment - justify-content: center/flex-start/flex-end;
For vertical alignment align-items: center/flex-start/flex-end;
For direction flex-direction: row or flex-direction: column
Note: When direction changes justify-content and align-items both exchange its nature.
For more info. you can visit.
https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

Try this
.media {
/* display: -webkit-box; */
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
float: left;
text-align: center;
margin: 0 17px;
}
.media-body {
width: 100%;
}
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>[phone]</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>

Answer 3

Restructured your HTML code and styled using flex.Hope this helps you.
<section>
<div class="contact-section">
<div class="address">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="contactInfo">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>[phone]</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="email">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>
Css change
.contact-section{ display:flex;}