first of all i’m not good enough with English
I started to learn html and css two week ago and finally made my first test html. look at the picture below i placed all of the title of pics to where they should be but third pic from left went a little to left
what’s the problem?
Here is my html and css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Celeber</title>
<style>
#container{
display: flex;
flex-flow: row wrap;
}
.actress {
background: #f6f7fb;
padding: 18px;
margin: 18px;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@850&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html"><h1>CELEBER</h1></a>
<h5 class="subject">Only high quality photos of celebrities</h5>
<hr>
<h5 class="asm">ACTRESS SINGER MODEL</h5>
</header>
<main id="container">
<div class="actress"
style="position: relative">
<img src="imgs/natalie.jpg" alt="natalie">
<h2 class="title" id="position">Natalie Portman</h2>
</div></a>
<div class="actress" style="position: relative">
<img src="imgs/christina.jpg" alt="natalie">
<h2 class="title" id="position">Christina Aguilera</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/alexis.jpg" alt="alexis">
<h2 class="title" id="position" class="title">Alexis Bledel</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/kelley.jpg" alt="kelly">
<h2 class="title" id="position" class="title">Nathalie Kelley</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/christina.jpg" alt="natalie">
<h2 class="title" id="position">Christina Aguilera</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/alexis.jpg" alt="alexis">
<h2 class="title" id="position" class="title">Alexis Bledel</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/kelley.jpg" alt="kelly">
<h2 class="title" id="position" class="title">Nathalie Kelley</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/christina.jpg" alt="natalie">
<h2 class="title" id="position">Christina Aguilera</h2>
</div>
<div class="actress" style="position: relative">
<img src="imgs/alexis.jpg" alt="alexis">
<h2 class="title" id="position" class="title">Alexis Bledel</h2>
</div>
</main>
<footer>
<h5 class="copy">2020 © celeber.ru</h5>
</footer>
</body>
</html>
CSS
html {
background: #ffffff;
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
color: #4c4c4c
}
header {
background: #ffffff;
max-width: 2000px;
max-height: 2000px;
margin: auto;
text-align: center;
}
main {
background: #f6f7fb
}
.copy {
font-family: nexa light;
text-align: center;
}
footer {
background: #333333;
color: #ffffff;
margin: 0px;
padding: 20px;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
margin: auto;
padding: 0px;
margin: 20px
}
.asm {
font-family: 'Josefin Sans', sans-serif;
padding: 10px;
margin: 10px
}
.subject {
font-family: 'Comfortaa', cursive;
color: #9d9d9d;
}
.title {
font-family: 'Source Sans Pro', sans-serif;
color: white;
}
#position {
position: absolute;
top:335px;
left: 110px;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: inherit
}
a:hover {
color: #01ff85;
}