margin-right is not working with my HTML. How can I center my content?

Question

Recently, I am learning Responsive Design . But I've got some trouble in centering my content when the screen gets big.

Here is the problem:

@media screen and (min-width: 950px) {
    body {
        margin: 10%;
    }
}

When I set the margin to 10%, only the margin-top and margin-left work. This is not what I want. margin-right doesn't work at all.

Here is the picture:

So, how can I fix this?

Answer 1

This is happening, because you are not setting the width of the body properly. If you specify margins, then you see margin-left working and it pushes your content to the right out of the screen.

You need to sum up the width and margins to 100%, so by giving 10% margins on both sides, you have to adjust the width to 80%.

@media screen and (min-width: 950px) {
    html {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body{
        width: 80%;
        margin: 10%;
        padding: 0;
    }
}

Also, you don't always have to adjust the calculation. You can also set them to auto-adjust like this:

body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

Answer 2

To adjust your content you can also use the position: relative; property of CSS.

@media screen and (min-width: 950px) {
body {
 position: relative;
 top: 0%;
 bottom: 0%;
 right: 10%;
 left: 0%;
 }
}

you can also give values in pixels like 50px;

Answer 3

I think this is your short and sweet answer

 body{margin: 0;} .wrapper{width: 80%; margin: 0 auto;} .wrapper img{max-width: 100%}

 <div class="wrapper"> <img src="https://images3.alphacoders.com/278/27807.jpg" /> </div>

Answer 4

Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.

img { display: block; }

Answer 5

Making the parent div style "float: right;" fixed this for me. In the parent I only had the content that needed to position.