For that you'll need to widen your whole layout or make the font titles smaller.
Recommendations/Observations
a) Define your font size in "em" or "%" units, not "px".
b) Write you selectors in order of (markup) structure. The code will be more organized. I recommend this style:
element selectors
#id selectors
.class selectors
Your issue
If you don't want to widen your layout then, like I said, make your titles smaller. If you widening the layout is okay with you, then replace what you currently have in your CSS Editor with this:
body {
background:#fff;
color:#444;
font:62.5% Arial, "Times New Roman", Times, serif;
text-align:center;
}
h1 {
display: none;
}
#nav {
width:100%;
border-top:0 solid #222;
border-bottom:0 solid #222;
float:left;
}
#pic {
width:770px;
height:200px;
border-bottom:0 solid #222;
}
#footer {
width:870px;
padding-top:8px;
border-top:4px solid #222;
font-size:10px;
text-transform:uppercase;
letter-spacing:.3em;
float:left;
clear:both;
}
#page {
width: 870px;
}
#content {
width: 600px;
}
#content_box {width: 100%;}
.post {width: 100%;}
Of course, you'll need to create another header image to fit the new width. The new width should be of 870px.
Notice I changed the "h1" selector definition to "display: none;". Setting the font size to 0 is not correct if you just want to get rid of the text, nor you need the other properties.
HTH.
alternativemagazine
