Hi, this is my second project

Hello, please find below my second html/css project.

I can’t figure out why the overlay does not fit all the screen !

Any reccomandations are welcome !

Your form looks okay @ahmed512. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
  • There are HTML coding errors you should be aware of and address.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your button look like a button instead of a bar.
  • I notice quite a few elements that are duplicates of the sample. The sample is just one way of doing the project. Start with a blank page and code one user story at a time.
1 Like

You’ve set the height/width on the overlay to 100%, but this is 100% of its parent element (which is the <body>). Using the dev tools in your browser hold your mouse over the <body> and you’ll see that it is not taking up the entire page. You’ll need to figure out why and get rid of whatever is causing this. I’ll give you a hint, most browsers add a margin to the <body> by default. But this is not the only element that has a margin that is causing you problems here.

Also, do not set a min-width on the <form>. There is no reason for it and it creates an unnecessary horizontal scroll bar as you narrow the view port.


i’ve added this : * { margin: 0; }
and it fixed the issue! i didnot manage to know what else could fixed, i tried html tag but did not work!

That is certainly one way to fix it. The only potential drawback from doing that is that you have removed all the default margins the browser uses for other elements, so if you were relying on any of those then you’ll have to add them back manually as needed.

1 Like