I am very new to HTML and trying a simple exercise of making "Hello World!" have a green background on top of the already blue one. I am at a complete loss and not sure what my error is. I have a suspicion that the div class is not in the right spot but whenever I move it my code crashes.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {background: lightblue;}
.container {text-align: in-the-middle;}
#center {width: 90%; color-of-background: olive; border-radius: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h1 style="color: white">Hello World!</p>
</div>
</body>
</html>