Force Navigation Bar To Stay On Line - html

Question

I am trying to make a about page for my website. I am trying to center 3 images inside a div, equally spread out on the page, adjusting to the window size using css.
My question is:
How do I get the items to be equally spaced out in the div while having the same width on the left and right sides?
The other solutions I have read about have not actually provided me with a solution.
Here is my code:
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
<div class="container">
<div class="row" id="managers-row">
<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>
</div>
</div>

Answer 1

Just use percentage values for your width instead of pixel ones.
.column {
width: 33.333333%;
box-sizing: border-box;
padding: 0 20px;
}
box-sizing allows you to add padding to the column without making the total width greater than the target 33.333%

Answer 2

If need be, you may want to add a fixed with to managers-row and use auto margin
#managers-row {
width: 240px;
margin: auto;
}
#screamer {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#kinzu {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#swezii {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
Screamer
</div>
<div class="one-third.column" id="kinzu">
Kinzu
</div>
<div class="one-third.column" id="swezii">
Swezii
</div>
</div>
</div>

Answer 3

Used center tag in HTML, and removed float:left;
WORKING:DEMO:UPDATED
HTML
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<center><!-- Added -->
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</center>
</div>
</div>
CSS
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#screamer, #kinzu, #swezii
{
display:inline-block;
}

Answer 4

You have some errors in your html, as well as some incorrect css. Here is what I think you are looking for:
http://jsfiddle.net/jkjzpz7z/2/
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<div class="column one-third">
<div class="screamer"></div>
</div>
<div class="column one-third">
<div class="kinzu"></div>
</div>
<div class="column one-third">
<div class="swezii"></div>
</div>
</div>
</div>
.column {
float: left;
}
.one-third {
width: 33.33%;
}
#managers-row {
width: 500px; /* Demo Only */
text-align: center;
}
.screamer,
.kinzu,
.swezii {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #000; /* Demo Only */
background-size: 100%;
}
.screamer {
background-image: url(../images/screamer.png);
}
.kinzu {
background-image: url(../images/screamer.png);
}
.swezii {
background-image: url(../images/screamer.png);
}

Answer 5

Use percentages, and remove white space between DIV elements(really annoying)
JS Fiddle
.one-third-column {
width: 33.333333333%;
display: inline-block;
}
.one-third-column img {
width: 100%;
height: auto;
background-color: red;
}
.one-third-column > div {
padding: 15px 15px 15px 15px;
}
<div class="container"><div class="row" id="managers-row"><h4 id="managers-head">Our Managers</h4><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div></div></div>

Answer 6

None of the other answers helped. I ended up using margin-left:10px; on the left aligned div, text-align:center; and display:inline-block; to center the middle div. Lastly I used a margin-right:10px; to align the right div.