Looks like you've switched http://fooducated.com/ to the Benevolence theme. Seems like your 1st question no longer applies, and this will help get you started on the 2nd question:
http://en.forums.wordpress.com/topic/width-for-benevolence-css?replies=14#post-478241
If you change the Benevolence theme width, you will also want to update the limit width setting at the bottom of the Appearance → Custom Design → CSS editor to match your new content area width, which is 690 for the example linked above.
After you widen Benevolence, you can just set a background color for the header area since your header image already uses a solid color behind it:
#masthead {
background-color: #f1e30f;
background-position: center;
}
And this will update the font size. Adjust the numbers if needed.
body,
.cite,
#blogTitle {
font-size: 12pt !important;
line-height: 1.3em;
}
#sidebar,
.title, #sidebar h2,
.commentPos,
#footer {
font-size: 10pt !important;
line-height: 1.3em;
}