To hide that entire line, you could add CSS like this to your Appearance → Themes → Customize → CSS panel:

.entry-meta {
     display: none;
}

You could also just hide the author name, but it would leave the "Posted by" text at the beginning and I think it looks a bit funny that way.

.author {
     display: none;
}

.entry-content, .entry-summary {
padding-left: 0;
padding-right: 0;
}

With the above change, the gap to the left of the content and to the right of the sidebar widgets is essentially the same. Do you want to reduce the gap to the right of the widgets and then widen the widgets to recover that reduction? If so, add the following and adjust the 4% right margin and then the width as desired.

.secondary #main .widget-area, .secondary #colophon {
margin-right: 4%;
width: 28.164%;
}

First try taking the width up a little to say 30% and see how that works before narrowing the right margin. If you narrow the right margin, then you will also have to narrow the margin to the left of the content to balance things. You can do that here.

#primary #content {
margin-right: 36.5%;
margin-left: 4%;
}

The margin-right value sort of works backwards from what you might expect. Decrease the value to increase the width of the content area.

I hope I haven't totally confused you.

The only issue now is that dang logo at the bottom of the posts. I cant seem to get rid of that border and shadow.

This is probably because you are using different HTML on different pages. Because of that, no CSS you apply will work the same for every single page. You can work around that by making the HTML for each logo consistent and then adding CSS to adjust the borders for all of them at once.

Follow these steps:

Go through every single page and update the HTML for the logo to include a specific class name you assign. For example, here is the current HTML for the logo that appears on the http://blog.synergydesign.ca/ page right now:

<a href="http://synergydesign.ca/"><img style="box-shadow:none;border:none;" alt="SynergyDesignLogo2013a" src="http://synergeticprocess.files.wordpress.com/2013/03/synergydesignlogo2013.jpg?w=150&h=51" width="150" height="51"></a>

Inside the "img" HTML element, add a class name such as "mylogo". Note that you can change the name to whatever you want as long as you pick the same name for every element you want to use CSS to adjust, "mylogo" is just one example.

Here is an updated version of the HTML above as an example:

<a href="http://synergydesign.ca/"><img class="mylogo" style="box-shadow:none;border:none;" alt="SynergyDesignLogo2013a" src="http://synergeticprocess.files.wordpress.com/2013/03/synergydesignlogo2013.jpg?w=150&h=51" width="150" height="51"></a>

Then go to Appearance → Custom Design → CSS editor and add the following CSS:

#main .mylogo {
	box-shadow: none;
	border: none !important;
}

Make sure to adjust ".mylogo" to something else if you used a different class name in your HTML.

Save changes. Check each one to make sure the change worked.

The only issue now is that dang logo at the bottom of the posts. I cant seem to get rid of that border and shadow.

.secondary #branding #searchform {
display: none;
}

#site-description {
background-color: none repeat scroll 0 0 #FFFFFF;
border: none;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}

.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}

#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}

.site-main .entry-content img.wp-image-46 {
border: none!important;
box-shadow: none;
-webkit-box-shadow: none;
}

hgroup #site-title {
display: none;
}

#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}

#main {
border-top: none;
box-shadow: none;
-webkit-box-shadow: none;
}

#comments {
background: none;
}

.hentry,
#comments {
background: none;
}

Thanks in advance!

.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}

#site-description {
background-color: white;
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: opx 0;
color: #FFFFFF;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}

.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}

#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}

.site-main .entry-content img.wp-image-46 {
border: none!important;
box-shadow: none;
-webkit-box-shadow: none;
}

#site-description {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-style: transparent;
border-width: opx 0;
color: #FFFFFF;
}

hgroup #site-title {
display: none;
}

.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}

#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}

#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}

#main {
border-top: none;
box-shadow: none;
-webkit-box-shadow: none;
}

#comments {
background: none;
}

You've got the #page selector twice, with identical properties and values: you need to delete the one of the two.

You've got the .secondary #branding #searchform twice too, again with identical properties and values: you need to delete the one of the two. And there's no point specifying the position of the searchbox when you say it shouldn't show, so it should be just this:

.secondary #branding #searchform {

display: none;

}

You've got the #site-description selector twice, with different properties and values, and some of them don't make sense; for instance, what's the point of specifying color, font-family, letter-spacing and text-transform when you say font-size 0 (that is, no show)? and what's the point of specifying anything when you haven't entered a tagline in the first place? Do you or don't you want the tagline to show?

Similarly, in the #site-image img selector, there's no point specifying a border color when you say border-width 0 (that is, no show). If you want no border, you just write border:none. And there's no such thing as border-style: #FFFFFF; - the border style values are solid, double, dashed etc.

I looked at this post as an example:
http://synergeticprocess.wordpress.com/2013/02/28/hey-listen-up/

1. How do I remove the thin line under the main header.

I tested this CSS and it worked:

#main {
	border-top: none;
}

To make it work for your blog, add that CSS to your Appearance → Custom Design → CSS editor and save changes.

2. How do I remove the shadow and box in our logo at the bottom of each post.

This example will work, but only if you inserted the image using this method: http://en.support.wordpress.com/images/#insert-an-image-you-have-already-uploaded (doing it that way should make it so the image gets a specific class name such as "wp-image-46"):

.site-main .entry-content img.wp-image-46 {
	border: none !important;
	box-shadow: none;
	-webkit-box-shadow: none;
}

However, it looks like you haven't inserted the image the same way in every post, and so the HTML is different and the CSS would need to be different too. To avoid that problem, you can set a unique class name in the HTML when you add the image.

For example, if you look at the Text tab when editing the "Hey, Listen Up" post, you'll see this HTML for the logo at the bottom of the post:

<a href="http://www.synergydesign.ca"><img class="noshadow" alt="Print" src="http://synergeticprocess.files.wordpress.com/2013/02/synergydesignlogo-footer1.jpg?w=150" width="150" height="45" /></a>

See the "noshadow" class? You can use that in your CSS instead of the class Beth used which was based on the image as it was inserted into another post:

.site-main .entry-content img.noshadow {
	border: none !important;
	box-shadow: none;
	-webkit-box-shadow: none;
}

Then you would need to make sure every image you wanted to remove the borders and shadow from had the "noshadow" class added to it in the Text tab (HTML) view.

3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?

Beth's example works for comments. If you look at the HTML for your posts, you'll also see that a background color is applied to the main post areas which have a class name of "hentry". In that case, you can simply add ".hentry" to the selector list for that CSS block to make it cover both areas:

.hentry,
#comments {
	background: none;
}

Thanks!

.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}

#site-description {
background-color: white;
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: opx 0;
color: #FFFFFF;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}

.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}

#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}

#site-description {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-style: transparent;
border-width: opx 0;
color: #FFFFFF;
}

hgroup #site-title {
display: none;
}

.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}

#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}

#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}

1. How do I remove the thin line under the main header.

Add this CSS:
#main {<br /> border-top: none;<br /> }

2. How do I remove the shadow and box in our logo at the bottom of each post.

.site-main .entry-content img.wp-image-46 {<br /> border: none !important;<br /> box-shadow: none;<br /> -webkit-box-shadow: none;<br /> }<br />

3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?

#comments {<br /> background: none;<br /> }

For 1 and 3, you must buy the CSS upgrade in order to edit visual style of theme.

The 2. i think it may be related to theme, but did you try editing so it have no border or shadow when inserting image? that attributes are editable.

Best Regards.

1. How do I remove the thin line under the main header.
2. How do I remove the shadow and box in our logo at the bottom of each post.
3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?

Thanks!

My Fruitshake theme header tabs currently span two rows instead of one. How do you adjust spacing between the header tabs, so that everything stays on one line?

http://introspective-eater.com

My Fruitshake them menu bar currently spans two rows instead of one. How do you adjust spacing in the menu bar tabs, so that everything stays on one line?

http://introspective-eater.com

Thanks!

Thanks!
Erin :D