How do I control margins on the wrapper?

HTML & CSS
1

Hi From still now wet and cloudy Wakefiled UK…

On this page http://www.pauserefreshment.co.uk/eastridingsshop.html
I’ve added a wrapper and my question is can you control the margin around the wrapper so it looks even all the way round rather just the left and right as heighlighted in the screen grab red circles?

Any insights welcome:

And here’s the wrapper css…

#container_ers
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom:20px;
width: 770px;
background:#fff;
}

2

Don’t want to bag on your design (constructive criticism. :))but you might want to re-think the body background image being so ‘in your face’. Very distracting to the text in the middle and not sure what value it adds to the page.

If you do decide to keep it google seamless background tiles to fix the hard edges of the repeating image. :slight_smile:

3

Well, people with wider screens are going to have more side-to-side space than vertical space, unless your wrapper can grow sideways (flex-width).

One thing you could try is from the other direction: give the body % padding and let the #wrapper loose as far as width. like

body {
padding: 10%; /or something/
background-image: url(java.jpg);
}

#wrapper {
/no width or margins/
background:#fff;
}

your vertical margins can be %'s as well. They don’t have to be px.