How to override margin and right/left in css?

you could also set @media the other way

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

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;

You could try:

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

But I am not sure how well supported they are. Alternatively set them to 0 which is the default;