I am working on a one page scrolling layout. I am having difficulty with two items:
1> adding a top margin for the main logo #img-home
2> how to do I get the viewable area of the layout to fit the browser size? I may not be asking this correctly but I do not want another page/section overlapping. Currently the about section is coming into the home section in the viewable area.
SunnaH,
This thread should be a continuation of the thread that you started yesterday:
and not a new thread. Please do not start new threads about the same topic. Just add a post to the existing thread. In that way, the record of progress will be continuous.
I cannot see (or understand) the issues that you are describing.
How do you want the page to look with a margin or padding above the main logo image? Perhaps an annotated screen shot would help.
The “sections” seem to be very visually separated in Firefox. Are you seeing the problem with overlapping content in a particular browser? Again, an annotated screen shot might help.
You have a typo in this rule:
#img-home {
margin-top 5em;
}
Can you spot it?
Answer:
#img-home {
margin-top: 5em;
}
I assume you mean that on tall monitors your next section is visible below the current section due to the vertical scroll effect you have implemented?
It would seem to me that you just need to make sure that each section is far enough away from the one above so that it does not become visible.
As an aside I don’t like these vertical scroll effects for main site navigation unless its for something obvious (like a long list of things such as an faq). I looked at your page and the first thing I noticed was the vertical scrollbar on the right so I started using that to scroll and see the content and for a while was confused abut the site as it seemed odd. Eventually I realised that the links in the top main nav didn’t go to another page but scrolled to items on the same page. I’m a firm believer in not trying to confuse customers and these one page vertical scrolls are in my mind too confusing. But that may just be my old age showing 
I have tried to fix the issue so I hope the reason you are not seeing it is because I did something right. When the browser window is resized one section with had three boxes. Two are floated left and the third one is clear. They still wrap but the layout below does not stay under the third box and instead the layout below overlaps over the boxes. I have attached a screenshot.
Try remmoving that height on line 606:
.slide {
margin: 0 auto;
width: 99%;
padding: 120px 0;
padding: 12rem 0;
[COLOR="#FF0000"]height: 40rem;[/COLOR]
}