CSS margin-top-bottom不起作用 iphone safari 浏览器

问：

在 iPhone Safari 浏览器上，“home-sci”类中的元素看起来失真，而在 Chrome 工具栏上看起来不错。当我将项目部署到实时取景时，我在 iPhone 设备上遇到了问题。如何解决此问题并确保在不同浏览器和设备上保持一致的显示？

iPhone 13 截屏。网站

HTML格式：

<section class="home" id="home">
        <div class="home-content">
            <h1>Hey! I'm <span>Mert Araz</span></h1>
            <div class="text-animate">
                <h3>Frontend Developer</h3>
            </div>
            <p>Tutkulu, yaratıcı ve kullanıcı odaklı çözümler sunmak için buradayım. 
                Web projelerinde estetik tasarımlar ve sürükleyici kullanıcı deneyimleri oluşturmayı hedefliyorum. 
                İşinizi dijital dünyada öne çıkarmak için size özgün ve etkileyici web çözümleri sunabilirim.</p>
                   
            <div class="btn-box">
                <a href="https://www.dostpen.com/wp-content/uploads/2023/07/Mert_Araz_CV.pdf" class="btn">CV İndir <i class='bx bx-down-arrow-alt'></i></a>
                <a href="https://github.com/measses?tab=repositories" class="btn">Projelerim  <i class='bx bx-briefcase'></i></a>
            </div>    
        </div>
        <div class="home-sci">
            <a href="mailto:[email protected]"><i class='bx bxl-gmail'></i></a>
            <a href="https://github.com/measses"><i class='bx bxl-github'></i></a>
            <a href="https://www.linkedin.com/in/muhammedmertaraz/"><i class='bx bxl-linkedin'></i></a>
            <a href="https://twitter.com/measssess"><i class='bx bxl-twitter'></i></a>
        </div>  
        <div class="home-imgHover">
        </div>
    </section>

CSS：

.home-sci a:hover{
    color: var(--bg-color);
}

.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background:var(--main-color);
    z-index: -1;
    transition: .5s;

}

media query:
/*home contact*/
  @media screen and(max-width: 430px){
    .home-sci a{
        margin-top:20px;
    }
}