Target IE11 and screen width simultaneously

I need to target IE11 and also specific breakpoints because some things are not working right on IE11. I know the CSS I need for the edit but I cannot figure out the media queries to properly target IE and the screen size simultaneously.

Ive tried the below code and multiple variations of each.

My question is what is wrong here and how do I fix this so it works?

@media screen and (-ms-high-contrast: active) and (min-width: 1200px),
       screen and (-ms-high-contrast: none) and (min-width: 1200px) {
          .scene-info {
               CSS GOES HERE
       }
}


@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), screen and (max-width: 991px) {
       .scene-info {
            left: 1px;   
       }
}

Solution

Try to modify your code as below:

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .scene-info {
            background-color: red;
        }

        @media screen and (-ms-high-contrast: active) and (min-width: 1200px), screen and (-ms-high-contrast: none) and (min-width: 1200px) {
            .scene-info {
                background-color: palegreen;
            }
        }

        @media screen and (-ms-high-contrast: active) and (max-width: 991px), screen and (-ms-high-contrast: none) and (max-width: 991px) {
            .scene-info {
                left: 1px;
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <p>This is a reference p.</p>
    <p class="scene-info">This then, is the test itself.</p>
</body>

The output like this:

More detail about css media, please check @media Rule and this article.