How to override margin and right/left in css?

Question

I have a div with this styling:

#slogan{
    font-size:24px;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

The latter 4 styles just center the div content on the page.

If the page gets too big, I don't want to use the following styling anymore, so I apply this style:

@media only screen and (min-width: 941px){
    #slogan {
        font-size: 24px;
        position: absolute;
        min-width: 810px;
        text-align: right;
    }
}

Which displays the content a certain amount from the left edge of the page. I tested these styles in the f12 dev tool, and it looks right. However, when I apply the style inside the css sheet, the margin and right/left parts get still applied to the element, and I don't know how to cancel them (there is no default value for margin).

Any help?

Answer 1

Use unset, inherit or initial to unset it.

@media only screen and (min-width: 941px){
    #slogan {
        font-size: 24px;
        position: absolute;
        min-width: 810px;
        text-align: right;
        margin-left: initial;
        margin-right: initial;
    }
}

Here are some global values

  /* Global values */
  margin: inherit;
  margin: initial;
  margin: unset;