How to redefine edge and right / left in css?

Question

I have a div with this style:

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

The last 4 styles simply center the contents of the div on the page.

If the page gets too large, I no longer want to use the following style, 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 contents of 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 marginal and right / left parts still apply to the element, and I don't know how to cancel them (there is no default value for the field).

Any help?

Answer 1

Use unset , inherit or initial to undo 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; 

Answer 2

You can try:

 margin-left: unset; margin-right: unset; 

But I'm not sure how well supported they are. Alternatively, set them to 0, which is the default:

Answer 3

you can also install @media in another way

 @media only screen and (max-width: 941px){ #slogan { position:absolute; left:0; right:0;} } 

Answer 4

If you want to overwrite css then you need to use! important after the attribute as shown below: -

 #slogan{ font-size:24px; position:absolute; left:0; right:0; margin-left:auto !important;//Whatever u want to overwrite margin-right:auto !important; }