Margin is giving some trouble

[newcoder1010]

Hi,

 

I have this code to margin. It works except right side of the block. That means right side of the block has no margin. I have done it few other blocks. It worked. I am not sure why this block margin right would not work. If you could inspect in browser (please scroll to bottom to see the class names). BTW, this is for screen max 768px for mobile.

 

http://godrupal.info/shalomhomesolutions

  .ourpromise{
    padding: 10px;
    margin:20px;  // MARGIN RIGHT NOT WORKING.
    background-image: url("/background%20color.png");
border-bottom:1px solid gray;

[Ingolme]

All your ourpromise elements are completely invisible no matter what screen resolution I use.

[newcoder1010]

When I scroll the screen to less than 768px, i see the elements in chrome.

[Ingolme]

There is a right margin on the element, the problem is that it's getting outside of the screen. Remember that the sum of all margins, padding, borders and width cannot exceed the width of the parent element. By giving the class col-xs-12 to your element you're starting its width off at 100%, then you're adding margin and padding on top of it.

 

You shouldn't be using tables there either, just wrap it in a <div> or something similar.

[newcoder1010]

For mobile version (<768px), I removed the col-xs-12 and now it worked. It brought up another question. I wrote margin-left: auto and margin-right: auto for the image to be centered but it did not put the image in center. Then I had to write margin-left: 20%; Can you advise why auto is not working?

.ourpromise img {
    margin-bottom: 10px;
    width: 60%;
    height: auto;
    margin-left: 20%;
    /* margin-right: auto; */
}

Thanks.

[dsonesuk]

A width, with margin: 0 auto; only work on block elements NOT! inline elements, now guess which of the two a img element is? to centre an inline element which basically acts as text does, you would use.... ????? yes! you should have guessed it by now, text-align: center;