I have used this method for many sites with no issues including sites with CMS’s.
Am converting a site to CMS and have added some round corner boxes. For some reason, there are lines projecting from the top and bottom corners except for the left bottom. I have been looking at this all day and have changed every measurement I can think of but still they remain.
It should be +1px not -1px as you are moving it down the page and not up.
Your problems have all arisen from this global rule you set for all divs.
div {
padding: 1px 0;
}
That’s was probably set in place to stop margin collapse but I would never use a global rule like that because has such far reaching effects (as you have found out).
Yes, you are correct! I don’t normally use it but I was following a tutorial in a liquid design manual and it was used. I’ll get rid of it. Probably why I have not had this issue before! There is such a thing as too much knowledge and not using it correctly!