My website so far - margin help.

https://code.sololearn.com/W46ziGe635bO Need feedback. Also how do I make the sides of my header fit the whole page without gaps?

html css is

4th Jul 2017, 8:48 PM

Mogammad Shameer Losper

4 Answers

+ 5

I would add a fixed position to the top and I think that u have to put in margin and padding statements for making an general box model

4th Jul 2017, 8:14 PM

Michael55555

+ 4

As previously said, the easiest fix is to set <body> margin to zero (so your 100% width <header> will really take the whole width available)... However, you need a mainly container if you want add some margin/padding to the rest of your content ;P Anyway, @JovanaD is right: <table> use for rendering layout is unadvised, because not followinf semantical recommendation ^^ Using a list, maybe in a <nav> container is the most obvious right semantical way, and you have several way to style it with css: + @JovanaD inline solution + the <table> without <table> solution: ul {display:table; width:100%; margin:auto;} li {display:table-cell;} + the 'FlexBox' solution: ul {display:flex; justify-content:space-around; align-items:center; padding:0; list-style-type:none;} + and so on... ;)

5th Jul 2017, 2:58 AM

visph

+ 3

Make the margin of the body 0. The gap comes from it by default. body { margin: 0; } Your page looks pretty cool by the way :) I wouldn't use a table to make de navigation bar though. Use a list instead and make them inline-block so it shows horizontaly and not verticaly and then you can use margin or padding to add the gap between the options. Something like this: ul li { display: inline-block; text-decoration: none; margin: 15px; } But that's just a personal opinion. I think it's easier this way.

4th Jul 2017, 9:35 PM

jovanad92

Thanks, in regards to the header, if I use left or right margin ,the header either moves one side or the other leaving a a gap either side whereas I want no gap either side.

4th Jul 2017, 8:22 PM

Mogammad Shameer Losper