Css seeming to have no effect

Question

I am attempting to use css in a small html game I am making for school. I am blind and use a screen reader to code however the styling of an element is not read out. I've been told that all my content is in a small rectangle or square in the corner of the screen. I am using ng-animate which also has no effect. What am I doing wrong, all my selectors match. My css:

body {
width: 100%;
height: 100%;}
#canvas{
bottom:0px;
}
.settings.ng-enter{
animation-name: expand;
animation-duration: 2s;
}
@keyframes expand {
0%   {
margin-top : 50%; 
margin-left : 50%; 
margin-bottom : 50%; 
margin-right : 50%; 
width: 0%;
height: 0%;
}
100%  {
margin-top : 0%; 
margin-left : 0%; 
margin-bottom : 0%; 
margin-right : 0%; 
width: 100%;
height: 100%;
}}

The animation is meant to expand from the centre into full screen, the rest is meant to be full screen apart from the canvas which I tried setting with js to be a square with screen width being the length of each side. I've tried placing it at the bottom of the screen with the css and setting its width again to screen width but it doesn't do anything

Answer 1

You can try something like this aswell if you just want to animate from the center to the edges into fullscreen!

otherwise you could try with using transform instead of margins (if you need this solution - i can add it later).

you could also give your .ng-enter class display: block since margin: auto (which would be the correct solution to center an object) doesn't work with display: static

.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100vh;
  background: black;
  position: absolute;
  top: 0;
  left: 0; 
  animation-name: expand;
  animation-duration: 4s;
}

@keyframes expand{
0% {
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
 }
}
100%{
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  }
}

<div class="wrapper">
<div class="container"></div>
 </div>