Html and css. My div class doesn't react to css

Question

I created a div class and called it .center in CSS. When doing all the styling it doesn't react when shown in browser. I made the exact same thing with the same code when creating the home page. However when I do the same thing for the second page nothing happens.

 .center { position: absolute; left: -25%; top: 85%; width: 100%; text-align: center; font-size: 18px; font-family: 'Anton', sans-serif; color: white; } 

 <div style="cursor:pointer; position: absolute; width: 59px; height: 42px; left: 687px; top: 29px;" onclick="openNav()"> <div class="fa fa-angle-double-down" style="font-size:50px; color:white; hover: black;"></div> <div class="center">Menu</div> </div> 

I have the same attributes for the homepage and the menu text is white with the font family and have the hover effect. However on this page it doesn't react to the CSS it's just plain black with standard font.

Answer 1

Your div.center is positioned absolutely in relation to its parent. Do this:

.center {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  font-family: 'Anton', sans-serif;
  color: #FFF;
}