Div is overflowing

Question

I'm trying to fit div. But I can't do that. I don't know why this is happening. How can I solve this? I will leave picture and that code below. Note: The code did not appear as in the picture in the trial part. I do not know why it happened. Thanks. Picture

Code:

    * {
      font-family: Verdana;
    }

    .postsContainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      width: 100%;
      height: 100%;
    }

    .post1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .post2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    .post3 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .post4 {
      grid-area: 2 / 2 / 3 / 3;
    }

    .post {
      height: 290px;
      max-height: 290px;
    }

    img {
      width: 100%;
      height: 210px;
    }

    h3 {
      margin: 0;
      font-size: 24px;
      display: inline;
    }

    p {
      margin: 0;
      margin-top: 2px;
      display: inline;
    }

    .postBody {
      padding: 4px 8px;
      max-width: 93%;
      display: inline;
      float: left;
    }

    .postLink {
      width: 7%;
      height: 74px;
      display: inline;
      float: right;
    }

    a {
      width: 100%;
      height: 100%;
      display: block;
      border: 3px solid #4caf50;
      border-radius: 2px;
      transition: background-color 0.5s;
      font-size: 24px;
      color: #fff;
      text-decoration: none;
    }

    .f1,.f2 {
      position: relative;
      left: 45%;
      top: 25%;
    }

    .f1::before {
      content: ">";
      transition: position 0.5s, opacity 0.5s;
      position: relative;
      left: 0;
      opacity: 1;
    }

    .f2::after {
      content: ">";
      transition: position 0.5s, opacity 0.5s;
      position: relative;
      left: 0;
      opacity: 0;
    }

    a:hover {
      background-color: #4caf50;
      cursor: pointer;
    }

    a:hover .f1::before {
      left: -10px;
      opacity: 1;
    }

    a:hover .f2::after {
      left: -10px;
      opacity: 1;
    }
**Hypertext Markup Language:**

    <div class="postsContainer">
      <div class="post post1">
        <img src="https://gorilasoftware.com.br/wp-content/uploads/2021/11/Lorem-Ipsum-768x492-1.png" />
        <div className="postBody">
          <h3>Title</h3>
          <p>Description</p>
        </div>
        <div className="postLink">
          <a href="google.com"><span className="f1"></span><span className="f2"></span></a>
        </div>
      </div>
    </div>

Javascript: