Help Me With CSS Styling : Web_design

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 &copy; 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;
}

Source link