css padding?

[mlegg]

On this site 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

[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.