Product Landing Page - problem with footer's width

HTML-CSS
1

Hey Guys, i’m going through this challenge just finishing the basic layout before going into the media queries thing.

I can’t achieve my footer looks like the example one, looks like it has a little margin; i believe this is because the page wrapper, it also has that margin (i don’t know why).

The footer should cover full width of the viewport, no margins. If i go for:

width: 100vw;

Im getting the same margin on left, and a scroll bar to the right (the footer will go further to the right border of the site).

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Build a Product Landing Page

Link to the challenge:

2

After checking using Firefox Inspector, i see the < body > has an 8px margin, don’t know why; but this is the margin is getting me some trouble.

3

Hello, it is always a good idea to reset the margin and paddding values to 0 at the beginning of the CSS document. In your case it would be solved by putting a margin = 0 in the body.

1 Like
4

Thanks pal, that was a new one for me; it solved my problem.

5

The same thing happened to me, until I found a solution, I always put * { margin: 0; padding: 0; box-sizing: border-box; } at the beginning of the CSS document, it is simple and you save yourself some headaches.

1 Like