css padding?

[mlegg]

On this site (http://ahepadistrict9.org) I am updating, in the white content section of the page, the text goes all the way to the left and right edges. What am I doing wrong?
This is the part of the CSS I am talking about.

#content {
clear:both;
position:relative;
padding:1.5em 5%;
}


FULL CSS:

html, body {
margin:0;
background-image:url(images/greekkey.gif);
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#036;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
a {
text-decoration:underline;
}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display:block;
width:100%;
}

#content {
clear:both;
position:relative;
padding:1.5em 5%;
}

h1 {
clear:both;
text-align:center;
}
h2 {
clear:both;
text-align:center;
}



.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
#img-ctr {
text-align: center;
}
#left {
float: left;
width: 32%;
padding:5px;
}

#middle {
float: left;
width: 32%;
padding:5px;
}

#right {
float:left;
width:32%;
padding:5px;
}

.columns {
width:100%;
}
.left{
float:left;
width:45%;
}
.right {
margin-left:45%;
}
.clear {
clear:both;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#social {
margin:auto;
text-align:center;
}
#map {
height: 100%;
}
#brothers {
margin:auto;
text-align:center;
}
#footer {
background:#7DA3E4;
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
}
#footer a {
color:#fff;
text-decoration:underline;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[mlegg]

this is how it looks now
5548

[Beverleyh]

This something like this instead;
#content {
clear:both;
position:relative;
padding:1.5em 0;
width:90%;
margin:auto;
}

[mlegg]

Beverly that didn't work. I just uploaded the new style css and it looks the same. Yes, I refreshed the cache and the css cache too ;)

[Beverleyh]

I just took another look and "content" is a class rather than an id, so use ".content" instead of "#content" in your CSS

[mlegg]

Wow, I can't believe that I overlooked that. Thank you so much.