Header Width and Font Size

I’m using the Oxygen wordpress theme. On WordPress.com my header text went across the entire screen and was very large with a subtext line as well. Now I’ve transferred to www.ads-software.com and I have the text I want, but it seems to cut it off in the middle. This means that my title (Undiscovered Sunsets) is now in two lines and doesn’t look nice. I also want to increase the font size.

Here is the CSS from my header. Is there something I can change here to fix the problem? Thank you in advance!

#header {
clear: both;
width: 100%;
float: left;
padding: 40px 0 0 0;
}
#branding {
float: left;
width: 45%;
overflow: hidden;
}
#site-title {
font-family: ‘Abel’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 3em; /* 36 / 12 = 3 */
line-height: 1em;
margin: 0 0 3px 0;
text-transform: uppercase;
word-wrap: break-word;
}
#site-title a {
color: #222;
border-bottom: none;
}
#header img { max-width: 100%; }
#site-description {
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 0.9166666666666667em; /* 11 / 12 = 0.9166666666666667 */
font-weight: normal;
line-height: 1.5em;
margin-bottom: 20px;
color: #bbb;
float: left;
width: 91.48936170212766%;
clear: both;
}
.breadcrumbs {
font-size: 0.9166666666666667em;
color: #aaa;
float: left;
width: 94.85%;
background: #f3f3f3;
padding: .25em .6em .35em .9em;
margin-bottom: 20px;
border-left: 10px solid #e9e9e9;
}
.breadcrumbs a, .breadcrumbs a:visited { color: #777; }
.breadcrumbs a:hover { color: #000; }
#sidebar-header {
overflow: hidden;
float: right;
width: 49.78723404255319%; /* 468 / 940 = 0.4978723404255319 */
height: 60px;
margin-bottom: 20px;
}