Проблема с align-items

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');
body  {
    align-items: center;
background-color: #003d5d;
    margin: 0;
    font-family: 'PT Sans Caption', sans-serif;
    color: white;
    display: flex;
    overflow: hidden;
    
}

.title {
    font-family: 'PT Sans Caption', sans-serif;
    color: white;
    margin-right: 10px;
    font-size: 50;
    text-align: end;
}
a {
    text-decoration: none;
    color: #0080c5;
    text-align: start;
}

.palka {
    width: 9px;
    height: 160px;
    border-radius: 10px;
    background-color: #005888;
}

.naz {
    display: flex;
    margin-right: 10px;
  
    align-items: center;
    justify-content: end;
}
.page {
    display: flex;
    margin-top: 30px;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;

}

.block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn {

    color: white;
    background-color: #005888;
    border: none;

    border-radius: 10px;
    transition: 0.1s;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
    width: 334px;
    margin-top: 10px;
    height: 3rem;
    text-decoration: none;
    text-align: center;

    
    
   
}
.btn:hover {
    background-color: #0070ac;
  
}
h1 {
    margin: 0;
}

.btn:focus-visible{outline-color:#007899}

.info {
    width: 334px;
    height: 299px;
    margin-top: 30;
    transition: 0.2s;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-right: 40px;
    background: #005888;
    border-radius: 10px;
}



.bloki {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
   
    
   
    
   
    
}

.fz-50 {
    font-size: 50px;
}

.text-a {
    text-align: center;
}

.lh-20 {
    line-height: 30px;
}

.fz-30 {
    font-size: 20px;
}

.marg-10 {
    margin: 10px;
}

.pos-a {
    position: absolute;
}


.proga {   
    display: flex;
    flex-direction: column;
    left: 0;
    align-items: center;
    
    margin-right: 20;
    
}
.proga2 {   
    display: flex;
    
    left: 0;
    align-items: center;
 
    position: absolute;
    margin-right: 20;
    visibility: hidden;
    
}

.img {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.515);
    margin-top: 40;
    width: 650;
}
*::selection {
  
    color: white;
    background-color:#005887 ;

}
.link-image {
    width: 35px;
    margin: 0 3 0 3;
    transition: 0.2s;

}

.link-image:hover {
    width: 38px;
}

.link-panel {
    display: flex;
    position: absolute;
    right: 7;
    top: 7;

    
}


h3 {
    margin: 0;
}

.donate {
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   padding: 0 10 0 10;
   margin-right: 5px;
   transition: 0.2s;
   height: 34px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.384);
   background-color: #d59706;

   right: 0;
   top: 7px;
}

.donate:hover {
    background-color: #c08600;
}


@media screen and (max-width: 600px) {
    .img {
        width: 420;
    }
    .proga {
        margin-top: 0;
    }
  }



@media screen and (max-width: 767px) {
    .bloki {
        justify-content: center;
       
    }


  }

  @media screen and (max-width:1504px) {
        .img {
            width: 470;
        }

        .proga {   
            display: flex;
            flex-direction: column;
            left: 0;
            align-items: center;
            justify-content: center ;
            margin-right: 20;
            
        }
  }

  @media screen and (max-width:1330px) {
    .img {
        width: 370;
    }

    .proga {   
        display: flex;
        flex-direction: column;
        left: 0;
        align-items: center;
        justify-content: center ;
        margin-right: 20;
        
    }

    body {
        overflow: visible;
    }
}
@media screen and (max-width:1258px) {
    .img {
        width: 420;
    }
.bloki {
    justify-content: center;
}

    .proga {   
        display: flex;
        flex-direction: column;
        left: 0;
        visibility: hidden;
        position: absolute;
        align-items: center;
        justify-content: center ;
        margin-right: 20;
        
    }
    .da {
        margin-right: 30;

    }
    .proga2{   
        display: flex;
     
        left: 0;
        visibility: visible;
        align-items: center;
        justify-content: center ;
    
        flex-wrap: wrap;
        position: unset;
        padding-bottom: 100;
        
    }
    .page {
        flex-direction: column;
        justify-content: unset;
    }

}
@media screen and (max-width: 900px) {
    .bloki {
        justify-content: center;
        
    }
    .da {
        margin-right: 0;

    }
  }

  @media screen and (max-width: 500px) {
        .page {
            align-items: flex-start;
        }

        .title {
            font-size: 40px;
            width: 300px;
        }

        .proga2 {
            margin-right: 0px;
        }
        .img {
            width: 350px;
        }

        .naz {
            justify-content: center;
            margin-right: 0px;
        }
        .info {
            margin-right: 0px;
            margin-left: 0px;
           
        }
   
  }

  @media screen and (max-height: 778px) {
    body {
        overflow: visible;
    }

}

<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Флектон</title>
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" href="./img/logo.png" type="image/png">
    
    </head>
    <body>  
      
        <header class="page" >
            

                      <div class="proga align-i ">
                        <img src="./img/proga.png" alt="" width="650" class="img"  style="margin-top:0;">
                        <img src="./img/proga2.png" alt="" width="650" class="img" >
                   
    
        </div>
        
        
            </div>
    
            <div style="padding-top:0;">
        <div class="naz" style="margin-top:5%;">
            <h1 class="title">Все ресурсы для твоего Minecraft<br> в одной программе</h1>
            <div class="palka"></div>
        </div>
        <div class="bloki">
            <div class="block">
                <div class="info">
                    <h1 class="fz-50">Легко</h1>
                    <h1 style="text-align: center; " >Установщик можно установить нажатием одной кнопки</h1>
                </div>
                <a href="./versions/" class="btn"><h1>Установить</h1></a>
                
            </div>
            <div class="block">
                <div class="info">
                    <h1 class="fz-50">ЧаВо</h1>
                    <h1 style="text-align: center;">Ответы на часто задаваемые вопросы</h4>
                </div>
                <a href="./info/" class="btn"><h1>Перейти</h1></a>
            </div>
        </div>
    
    
            <div class="proga2 align-i ">
              <img src="./img/proga.png" alt="" width="650" class="img da" >
              <img src="./img/proga2.png" alt="" width="650" class="img" >
         
    
            </div>
       
        </header>
        
      
    </body>
    </html>