I’ve started creating a simple page for an assignement and I’m trying to put a title at the top of the page but whenever I create a patagraph or h1 to do so it’s placed next to the divs with the content in the center. I think that the problem has to do with the css code that centers and gives it’s propieties to the body and I doubt it has something to do with the continer class:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color:#849edb;
display:flex;
justify-content: center;
align-items: center;
height:100vh;
}
#container{
background-color: white;
padding:30px;
text-align:center;
border-radius:15px;
width: 15%;
padding: 20px;
margin: 10px;
}
</style>
</head>
<div>
<a href = 'index.html'>
<img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;"/>
</a>
<h1>Title</h1>
</div>
<body>
<div id ="container">
<h2>Sports</h2>
<p>Text here</p>
</div>
<div id ="container">
<h2>Informatics</h2>
<p>Text here</p>
</div>
<div id ="container">
<h2>Arts</h2>
<p>Text here</p>
</div>
</body>
I’ve tyryed to place the title in different places and can’t seem to be able to move it to where I vant it to be. I’ve also tryed to create a different id for the title so that it’s aligned differently.