fullscreen not working

Question

Hi all,

 

I am working on MVC Core application

 

I have following css:

 

@media (min-width:1366px) and (max-height:768px) {

#maincontainer:fullscreen {

margin-top: 35vw;

}

#maincontainer:-webkit-full-screen {

margin-top: 35vw;

}

#maincontainer:-moz-full-screen {

margin-top: 35vw;

}

#maincontainer {

margin-top: 35vw;

}

}

 

and html is

 

<div id="maincontainer">

<span id="logo">

<a id="linkLoginIndex" href="#">

<img src="~/images/ContinueToLogin.png" class="img-responsive" style="width:100%;height:20%;position:center;" >

</a>

</span>

</div>

 

When I turned on the full screen mode by pressing F11, margin top is not getting reset as per CSS, Please help what extra I need to do??