CSS for a Staff Plugin; Format staff

Good morning. I have an issue where I cannot seem to get the display properly configured. I want them in rows to fill 100% of the space.

http://cityofhanahan.com/government/police-department/police-staff/

This is what I have so far.

CODE

<div id="one-person">
<div class="person-name"><h6>[name]</h6></div>
<div class="person-titre"><h6>[position]</h6></div>
<div class="person-number">Phone: [phone_number]</div>
<div class="person-email"><a href="mailto:[email]">Click to Email</a></div>
</div>

CSS

#one-person {
text-align:left;
padding-right: 30px;
margin-right: 35px;
float: left;
}

.person-photo img {
margin:0 auto;
width: 200px;
height: 200px;
}

.person-name {
margin-top:1em;
margin-bottom: 0px;
font-size: 14px;
}
.person-name h6 {
margin: 0px;
padding: 0px;
}

.person-titre {
margin:0px;
padding-top:0px;
}
.person-titre h6 {
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

#one-person {
width:100%;
text-align:center;
margin:30px 0 30px 30px;
float: none;
padding-right: 30px;
}

.person-photo img {
margin:auto auto;
width: 350px;
height: 350px;
}

.person-name {
margin-top:1em;
}

.person-titre {
width: 25%;
margin:0px;
padding-top:0px;
float: left;
}
.person-titre h4 {
margin-bottom: 0px;
padding-bottom: 0px;
}