Problem with content..

Hi, check out my site: https://www.calvinle.com

As you can see, the word in the content spread out the design.. how to wrap it so it doesnt extend out the design?

/* Main */

#main {
margin: 0 auto;
width: 869px;
}

/* Main – Content */

#content {
float: left;
width: 521px;
padding: 0 17px 0 16px;
}

/* Main – Content – Post */

#content .post {
float: left;
margin-bottom: 30px;
width: 521px;
}

/* Post – Title */

#content .post .post-title {
width: 521px;
height: 59px;
font: bold 12px “Century Gothic”, Century Gothic;
color: #ffffff;
}

#content .post .post-title a {
color: #ffffff;
text-decoration: none;
}

#content .post .post-title a:hover {
text-decoration: underline;
}

#content .post .post-title h2 {
color: #F6D866;
font: bold 22px “Century Gothic”, Century Gothic;
padding: 2px 0;
}

#content .post .post-title h2 a {
color: #F6D866;
text-decoration: none;
}

#content .post .post-title h2 a:hover {
text-decoration: underline;
}

#content .post .post-title .post-date {
float: left;
background: url(“images/post_date.gif”) no-repeat;
width: 59px;
height: 52px;
margin-right: 18px;
color: #ffffff;
text-align: center;
text-transform: lowercase;
font: bold 9px ;
letter-spacing: 1px;
}

#content .post .post-title .post-date span {
padding: 10px 0 1px 0;
display: block;
}

/* Post – Entry */

#content .post .post-entry {
font: normal 12px/18px “Century Gothic”, Century Gothic;
color: #ffffff;
width: 491px;
padding: 0 10px;
}

#content .post .post-entry a {
color: #ffffff;
text-decoration: none;
}

#content .post .post-entry a:hover {
text-decoration: underline;
}

#content .post .post-entry a.more-link {
font: bold 12px/18px “Century Gothic”, Century Gothic;
color: #ffffff;
text-decoration: none;
}

#content .post .post-entry a.more-link:hover {
text-decoration: underline;
}

#content .post .post-entry blockquote {
border-left: 10px solid #e6e6e6;
margin: 0px 30px;
padding-left: 15px;
}

/* Post – Info */

#content .post .post-info {
padding: 0 15px;
width: 437px;
height: 26px;
background: url(“images/post_info.gif”) no-repeat;
clear: both;
font: bold 12px/26px “Century Gothic”, Century Gothic;
color: #ffffff;
}

#content .post .post-info a {
color: #ffffff;
text-decoration: none;
}

#content .post .post-info a:hover {
text-decoration: underline;
}

/* Post – Comments */

#content .post h3 {
margin: 30px 0 5px 0;
color: #ffffff;
font: bold 18px “Century Gothic”, Century Gothic;
}

#content .post .comments {
font: normal 12px/18px “Century Gothic”, Century Gothic;
color: #ffffff;
width: 521px;
}

#content .post .comments ol {
margin: 10px 0;
padding-left: 25px;
}

#content .post .comments ol li {
padding: 5px;
}

#content .post .comments ol li a {
color: #ffffff;
text-decoration: none;
}

#content .post .comments ol li a:hover {
text-decoration: underline;
}

#content .post .comments ol li.alt {
background: #e6e6e6;
}

#content .post .comments ol li cite {
color: #ffffff;
font-style: normal;
font-weight: bold;
}

#content .post .comments ol li cite a {
color: #ffffff;
text-decoration: none;
}

#content .post .comments ol li cite a:hover {
text-decoration: underline;
}

#content .post .comments ol li .commentmetadata a {
color: #ffffff;
text-decoration: none;
}

#content .post .comments ol li .commentmetadata a:hover {
text-decoration: underline;
}

#content .post #commentform {
margin: 0;
padding-left: 25px;
font: normal 12px/18px “Century Gothic”, Century Gothic;
color: #ffffff;
width: 496px;
}

#content .post #commentform a {
color: #ffffff;
text-decoration: none;
}

#content .post #commentform a:hover {
text-decoration: underline;
}

/* Main – Content – Navigation */

#content .navigation {
margin-bottom: 30px;
font: bold 12px “Century Gothic”, Century Gothic;
color: #ffffff;
width: 541px;
}

#content .navigation a {
color: #ffffff;
text-decoration: none;
}

#content .navigation a:hover {
text-decoration: underline;
}

#content .navigation .navigation-previous {
float: left;
}

#content .navigation .navigation-next {
float: right;
}