我的形象看起来不像它应该看起来的样子

Question

目前我正在看一个制作博客网站的 YouTube 教程。我们的代码相同，但我的图片看起来不像视频中的样子。我已经问过我的朋友并尝试更改代码，但也没有用。我能做些什么？我分享了代码和我的意思。

您可以从链接看到教程：https://www.youtube.com/watch?v=HtRTmkd5Nsg&list=LL&index=18

  /* HERO SECTION */

  .hero{
    background: var(--background-primary);
    padding-top: 2rem;
    padding-bottom: var(--py);
    text-align: center;
  }

  .hero .h1{
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .hero b{
    color: var(--accent);
    font-weight: inherit;
  }

  .hero .h3{
    color: var(--foreground-secondary);
    margin-bottom: 2rem;
  }

  .hero .btn-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
  }

  .hero .right{
    display: none;
  }
  
      /* HERO SECTION */

    .hero{
        text-align: left;
    }

    .hero .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 50px;
    }

    .hero .btn-group{
        justify-content: start;
        gap: 30px;
    }

    .hero .right{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero .pattern-bg{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 200px;
        background: url(../images/pattern.png);
        background-size: contain;
        opacity: 0.2;
    }

    .hero .img-box{
        position: relative;
        z-index: 2;
    }

    .hero-img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0 0 280px 230px;
        transform: translate(10px , -10px);
    }

    .hero .shape {
        position: absolute;
        top:  50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -42%) rotate(-20deg);
      }
    
      .hero .shape-1 {
        background: var(--accent);
        width:  90%;
        height: 90%;
        z-index: -1;
      }
    
      .hero .shape-2 {
        width:  92%;
        height: 92%;
        box-shadow: inset 0 -30px 0 var(--action-primary);
        z-index: 2;
      }

<!-- HERO SECTION -->
        <div class="hero">
            <div class="container">
                <div class="left">
                    <h1 class="h1">
                        Hello World! I'm <b> Buse&nbsp;Nur </b>,
                        <br> Web Developer
                    </h1>
                    <p class="h3">
                        Specalized in <abbr title="Accessibility">ally</abbr>
                        and Core Web Vitals
                    </p>
                    <div class="btn-group">
                        <a href="#" class="btn btn-primary"> Contact Me </a>
                        <a href="#" class="btn btn-secondary"> About Me </a>
                    </div>
                </div>
                <div class="right">
                    <div class="pattern-bg">
                        <div class="img-box">
                            <img src="./images/profile.jpg" width="500px" height="500px" alt="Buse Nur Çetin" class="hero-img">
                            <div class="shape shape-1"></div>
                            <div class="shape shape-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>