jppv.net is the place where I'm working on, It's a responsive theme and when I the screen is scales down the screen size to 719px (max) my menu layout changes but an extra 20 odd pixel space is being added and I can't get rid of it. see the attached image.

I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

You just need to do this:

`

#header_margin{padding-bottom:0}

`

Unless you meant something else of course

Boss now new problem arose. the menu bar gets extra margin/padding from the left.

Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

you know what, I think I'm going to like this. As this will enable me to understand other people's codes. And not get bluffed when I see a different rule like now.

For single rules your one and the regular rules using multiple lines.

by the way this is valid too right? One Line!!

#header_margin{padding-bottom:0; margin:0;}

Paul_O_B said:

Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.