Aligning a container in CSS - html

Question

Unfortunately my knowledge of CSS is fairly limited, I currently have a theme, although I would like the right hand captions e.g. Contact and About to be aligned to the right so the two captions will always appear on the right hand side of the page.
Any help would be appreicated, I have identified the container in CSS - "right"
The template is located here:
http://themeforest.net/item/cleanfolio-dark/22659
CSS Code:
body {
background: url(../images/bg.png) repeat;
font: 12px Arial, Helvetica, Sans-Serif;
padding: 0;
margin: 0;
}
#container {
width: 1165px;
}
/* ---- Standard Elements ---- */
a {
color: #BBBBBB;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
h1, h2, h3, h4, h5 {
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bolder;
color: #FFFFFF;
padding: 0;
margin: 0px 0px 0px 0px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
p {
line-height: 1.8em;
padding: 0;
margin: 0 0 5px 0;
}
/* ---- Header ---- */
#header {
background: url(../images/blue/header_bg.png) repeat-x;
height: 130px;
}
.header_title {
float: left;
background: url(../images/blue/header_titlebg.png);
width: 370px;
height: 110px;
padding: 20px 0px 0px 30px;
}
.header_title h1 {
font-size: 47px;
font-weight: bolder;
color: #FFFFFF;
padding: 0;
margin-bottom: -4px;
}
.header_title span {
font-size: 10px;
color: #71b3f0;
}
/* ---- Left Side Elements ---- */
#left {
float: left;
width: 840px;
margin-right: 25px;
}
.portfolio_section-top {
background: url(../images/topdivider.png) no-repeat;
width: 790px;
height: 280px;
padding: 30px 10px 0px 30px;
}
.portfolio_section {
background: url(../images/divider.png) no-repeat;
width: 790px;
height: 280px;
padding: 30px 10px 0px 30px;
}
.portfolio_section-top img, .portfolio_section img {
background: #111111;
padding: 15px;
border: 1px solid #222222;
}
.portfolio_section-top h1, .portfolio_section h1 {
margin-bottom: 5px;
}
.portfolio_section-top small, .portfolio_section small {
font: 10px Arial, Helvetica, Sans-Serif;
color: #666666;
text-transform: uppercase;
line-height: 2em;
}
.portfolio_section-top p, .portfolio_section p {
font: 12px Arial, Helvetica, Sans-Serif;
color: #999999;
margin-top: 10px;
line-height: 1.8em;
}
.button_bg {
background: url(../images/blue/button_bg.png) repeat-x;
height: 14px;
font: 10px Arial, Helvetica, Sans-Serif;
color: #FFFFFF;
text-transform: uppercase;
padding: 5px 10px 5px 10px;
}
.tdmarginright td {
padding-right: 30px;
}
.tdmarginright2 td {
padding: 10px 17px 0px 0px;
}
.footer {
margin-left: 30px;
color: #666666;
}
/* ---- Right Side Elements ---- */
#right {
float: right;
width: 300px;
margin-top: 30px;
}
.sidebar_title {
background: url(../images/sidebar_titlebg.png);
width: 283px;
height: 38px;
padding: 12px 0px 0px 17px;
}
.sidebar_bg {
background: url(../images/sidebar_bg.png) repeat-y;
width: 268px;
color: #666666;
padding: 0px 15px 15px 17px;
}
.sidebar_bottom {
background: url(../images/sidebar_bottom.png) no-repeat;
width: 300px;
height: 1px;
margin-bottom: 30px;
}

Answer 1

Don't know if this is too obvious, but--
The CSS looks alright,
Just note that it's #right -- not .right -- so obviously in your html you'll be using div id not div class

Answer 2

You would use
<div id="right">content here</div>
not
<div class="right">content here</div>
hope this helps.
If you're still having problems, you should contact the vendor from where you purchased the template.