div.sharedaddy {<br /> margin-top: 28px;<br /> }

Thanks anyway.

The original Hero CSS doesn't include it. I've tried:

.sharing { padding-top: 20px;}

.sharing { margin-top: 20px;}

#sharing { padding-top: 20px;}

#sharing { padding-top: 20px;}

and nothing happens.

I've also tried increasing bottom margin of entry, hentry and content with no result.

Can this be done at all?

Thanks a lot in advance for your help!

So is there an exact number to put in place of that "0" that all the other pages have to make it match exactly or is it just based on how it appears?

Well, the spacing below the nav bar is the same for all pages if you don't add the rule for the http://11213.org/king-in-the-field/ page:

.page-id-1763 #access {
	margin-bottom: 0;
}

It's just that the image at the top of that page has its own extra padding, and that's probably what should be removed instead. Give the following a try, it's probably a better solution now that you've posted some specific examples and I have a better idea of what you're trying to do:

1) Remove the "page-id-1763" custom CSS
2) Open the page for editing
3) Click the image in the visual editor
4) Click the image edit icon that appears
5) Click the "Advanced Settings" tab
6) Add this to the "Styles" field: margin-top: 0;
7) Click "Update" to save the image change and then save the post

I see that adding the code across the board ruins the margins on all the other pages

So I added it to just that draft page (http://11213.org/king-in-the-field/)

If you look now, you will see it moved up but too much and doesn't match the other pages (for example: http://11213.org/about/)

I noticed that if I edit the number "0" in the code you give me, the gap gets slightly larger with each point I add...

.page-id-1763 #access {
margin-bottom: 0;
}

So is there an exact number to put in place of that "0" that all the other pages have to make it match exactly or is it just based on how it appears?

Once we get that, I would like to know - How do you find the "page id"? Since the page I have been using was just for testing and not the page I will go live with... (For now it wont be the home page either) so how do I find the "page id" so I can use it when I like, on only the pages I like?

Thank you very much for your help

To get rid of the spacing below the menu on the http://11213.org/king-in-the-field/ page, try adding the following to your Appearance → Custom Design → CSS editor:

#access {
	margin-bottom: 0;
}

If you want to apply that rule to just the http://11213.org/king-in-the-field/ page, you can look in the body tag to see what specific classes it has and use one of them in the selector to make it work for just that page. http://11213.org/king-in-the-field/ has a body class of "page-id-1763" so you could do this:

.page-id-1763 #access {
	margin-bottom: 0;
}

Or if you find that you only want to make that adjustment to the home page (after you switch it), put ".home" in front of the selector to get this:

.home #access {
	margin-bottom: 0;
}

This question was asked a while ago since then I changed to the standard slider homepage - and yes that does have the same size gap.

However I do plan on switching back to the custom homepage I had when I originally posted this.

This is not my live homepage now but this is what it looked like:
http://11213.org/king-in-the-field/

I am planing on switching back to this format any day now and if I can have that margin issue figured out that would be great. (I may post an image in that 900x500 space or a video either way it leaves a big gap above it)

Thank you for your help.

#page {
     max-width: none;
}

body {
	padding: 0;
}

That code removes the header's max width of 1000 pixels, but there's always a margins between the headers's sides and the browser window frame (let's call it that).

What I was trying to do was having the header and footer occupy the full width of the page, with no margins (as I was able to do at the top, for instance, where the header is now touching the edge of the page without a margin)

#page {
     max-width: none;
}

This forum is for WordPress.com blogs. Your blog at http://mikeperazzetti.com/ is using WordPress, but it is not setup here at WordPress.com.

To get you started, here is some CSS you can try out to expand the left column:

body .primary {
    width: 80%;
}

#sidebar {
    width: 16%;
}

In your case, I would recommend using the CSS Editor that comes with the Jetpack plugin to make the change. If you need help learning how to use it, this is the forum you'll want:
http://wordpress.org/support/plugin/jetpack

If you need further help, you should try asking at a volunteer based forum such as http://wordpress.org/support/ or a CSS forum that is open since this one is only for WordPress.com blogs.

With your code the contents width adjusts to the header's width, but there's always a margin between the header's sides and the limit of the page...

#content {
	margin-left: 0;
	width: 75%;
}

#secondary {
	margin-right: 0;
}

And use this for single posts without a sidebar:

.singular #content {
	margin: 0;
}

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	width: 100%;
}

Adjust the width as needed.

Is that the space you're referring to or am I looking at the wrong thing?

I am not certain what androidempirepk is attempting to do, but I have a similar issue. I want to make the entire content area wider (at least on the right side. The left side is acceptable I believe.) I am using the Tarski theme and my web site is here: http://mikeperazzetti.com/

Can you help? I have dug everywhere lately, I can find nothing that works, the best way to do it, or where it should be done and how. I appreciate all of your help. Thank you.

I'm afraid it doesn't do the trick... Top and Bottom respond, but the sides remain with a margin..

I don't know if it's a theme specific limitation or if there's something we're missing...

#page {
margin: 0 !important;
}

instead if you want to remove the margin on all sides.

I've been fighting with my page's margins.

I was able to remove the top and bottom ones with

#page {
	margin-top: 0;
	margin-bottom: 0;
}

but no matter what I try I can't remove the left and right ones...

Any ideas?
Thank you guys

To answer your original question, you could make the welcome message on the Hatch theme wider on the Mixfolio theme by adding the following CSS to your Appearance → Custom Design → CSS editor:

.row .eight.columns {
	width: 55%;
}
.row .four.columns {
	width: 40%;
}

Lastly, I need to make a larger body margin for my blog. Please guide me with all these problems.

I'm not 100% sure what you mean here. Do you mean larger padding inside the main content area like this?

li.type-post, div.type-post, .type-page, .home-post, .featured {
	padding: 20px
}

Or do you mean you want to make the entire content area thinner or wider?

Also, how can i change the highlight color when I hover over a menu?

#top-menu li a:hover {
	color: red;
}

Change the color name to a color code of your choice:
http://automattic.github.com/Iris/

Second, I want another navigation bar. Preferably on the top.

You can't really use CSS to add something that's not there, but you can re-position things that are there. Aside from that though, why do you need a 2nd navigation bar? From a usability perspective, I'd say it's probably not needed.

I need help adding a logo instead of the header text. Please can someone write a CSS code with this logo image:

I see that you tried adding it as a background image, which gets you close! I would recommend setting the image as a background in the header instead. Here is some CSS to get you started:

#header-wrap {
	background: url('http://pakdroidinfo.weebly.com/uploads/1/3/8/3/13835343/1350395703.png') no-repeat;
}

Thank you

Look at the homepage http://11213.org/

That gap compared to the gaps on the "About" and "Archive" page mentioned above

Thanks

I see what you mean about your spacing of the images. I don't have an answer for that one.

My site is http://11213.org and I have the custom CSS upgrade

I am using my homepage for images that link to posts/pages

If you look at the "Home" (or "Calendar") page at the space above the image - there is a wide gap between the top of the image and the page bar

On the "About" page (http://11213.org/about/) the gap between the top of the video and the page bar is smaller.

On the "Archive" (http://11213.org/archive/) page the gap between the top of the first image thumbnail and page bar is smaller.

I would like to make the gap on the "Home" page a bit smaller to match the way it is on the "About (or "Archive") page.

What is the CSS code to do that?

Thank you

PS: While on the subject of image margins, on the home page under the main large image there are 4 smaller ones - they were centered in the "Visual" side of the page editor. For some reason the 4 images together are not exactly centered but are pushed slightly to the left so the gap on the right side is bigger than the gap on the left side - please let me know how to adjust this if it cant be done in the visual editor - what about CSS?