Please help with moving the position of the banner/logo.

I’ve been messing around alot with the styles and stuff, and I’ve manage to get what I want the theme to do for me by reading on this and other forums. But one thing I’m stuck with now, is trying to move the banner or logo to the left a bit. Since I’ve made the content area wider and the sidebars bigger and stuff, it just don’t line up any more. I can’t find how to toss this logo to the left. Please help.

The website is : https://www.ehowtodrywall.com
Thank you

Here’s my user.css :

.post .entry-content a { color: #800517; }
#nav .sf-menu {
float:left;
line-height:1.1;
max-width:980px;
}
.attachment-post-thumbnail { width:240px; height:150px; padding:10px 20px 10px 0; float:left; }
#branding {
margin: 0 100 0 20px;}
#searchbar { display: none; }
entry-title a:focus a:hover { color: #000000 }
#main { width : 1300px; }
#main {
position: static;
top: 50%;
left: 50%;
}
#footer { width : 1320px; }
#container {
position: static;
top: 50%;
left: 50%;
}
#primary {
float: left;
margin: 0 29 0 -220px;
width: 280px;
}
#secondary {
float: right;
margin: 0 0 0 -220px;
width: 280px;
}
#content {
position: relative;
top: 00px;
left: 55px;
margin: 0 220px 0 230px;
width: 740px;
overflow: hidden;
}
.featured-article img {
height: 225px;
width: 830px;
}
#controls .next {
left: 800px;
}
element.style {
display: none;
height: 225px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 800px;
z-index: 5;
}
.featured-entry {
height: 75px;
top: -75px;
width: 830px;
}
.featured-entry .entry-title {
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
padding: 8px 12px 5px;
}