Align Text Inside A Inline-Block Div? CSS - css

Question

I am trying to align a group of text, including p and h5 html elements. I am using inline-block display type to get the text to be on the same line for the titles. If the aligning with this display type is not possible it would be helpful if you could provide a alternate way the 3 titles on the same line. Here is my code:
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 4%;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
#importantpeople {
text-align: center;
}
#manager-1 {
font-weight: 500;
text-align: left;
margin-left: -2px;
display: inline-block;
text-align: left;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
}
#manager-3 {
font-weight: 500;
text-align: right;
margin-right: 10px;
display: inline-block;
text-align: right;
}
<div class="container">
<div class="row">
<div id="seven columns" id="seven-cols">
<h4 id="aboutus">About Us</h4>
<p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our clients.
If you want to be apart of this movement then sign up now!</p>
</div>
</div>
</div>
<div class="container">
<div class="row" id="importantpeople">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
<h5 id="manager-1">Screamer</h5>
<h5 id="manager-2">KINZU</h5>
<h5 id="manager-3">Swezii</h5>
<p>Just a guy chilling on his computer creating works of art for people</p>
<p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
So my question is how to I align #screamer to the left, #kinzu to the center and #swezii to the right when it is on the same line?

Answer 1

Use float: left for the #manager-1 and float: right for the #manager-3.
This pulls the Screamer to the left and the Swezii to the right while KINZU is in the center.
#manager-1 {
font-weight: 500;
float: left;
margin-left: -2px;
display: inline-block;
text-align: left;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
}
#manager-3 {
font-weight: 500;
float: right;
margin-right: 10px;
display: inline-block;
text-align: right;
}

Answer 2

Change the Margins to 20%, and invert the direction you have them set as, make sure you use % not px for the margins.
#manager-1 {
font-weight: 500;
text-align: left;
margin-right: 20%;
display: inline-block;
text-align: left;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
}
#manager-3 {
font-weight: 500;
text-align: right;
margin-left: 20%;
display: inline-block;
text-align: right;
}