はみ出た要素を消したいのに消すことが出来ません

コーディングの勉強をしています。

背景にロゴ画像を入れる部分があるのですが、カンプからはみ出る見切れたデザインになっています。
※図参照

logoを囲っているdiv にoverflow:hidden を設定しても消えません。

どうしたら見切れた部分を見えなくすることができるのでしょうか？

@charset "UTF-8";

html {
 font-size: 16px;
}

body {
 background-color:#c4c4c4;
 color: #fff;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 1rem;
}


/* 背景固定してスクロールバーを消す*/

body.noscroll {
 position: fixed;
 overflow: hidden;
}

a {
 text-decoration: none;
}

img {
 max-width: 100%;
 vertical-align: bottom;
}

li {
 list-style: none;
}



/*
ハンバーガ―メニュー
*/

.hamburger {
 display: none;
}



#navi .logo {
 width: 68px;
 height: 70px;
 object-fit:contain;
}



.section-title span.en {
 font-size: 2rem;
 display:block;
 text-align:center;
}

.section-title span.ja {
 font-size: 1rem;
 display:block;
 text-align:center;
}
.color-black{
color:#000;
}
.color-white{
 color:#fff;
}

.pc-br {
 display: block;
}

.sp-br {
 display: none;
 /* パソコン時は、brタグを表示しない＝改行しない */
}


/*
サイト全体のコンテンツ幅を指定するための共通クラス
*/

.wrapper {
 background:#fff;
 max-width: 1440px;
 margin: 0 auto;
 width: 100%;
}


/*
中身のコンテンツ幅を指定するための共通クラス
*/

.container {
 max-width: 1440px;
 margin: 0 auto;
 padding: 0 10%;
 width: 100%;
}


/*-------------------------------------------
ヘッダー
-------------------------------------------*/





/*-------------------------------------------
Menu
-------------------------------------------*/

#navi {
 position:absolute;
 background: rgba(247, 94, 94, 0.75);
 width:1440px;
 height: 100px;
  line-height: 50px;
 bottom:0;
}

#navi .list-nav {
 width:786px;
 padding:25px 0;
 margin-left:145px;
 display: flex;
 justify-content: space-between;
}

#navi .list-nav li a {
 color:#fff;
 font-weight: bold;
 display: inline-block;
}

#navi .list-nav li a:hover {
 opacity: .7;
}

#navi .list-nav span.en{
 font-size:1.5rem;
 font-weight:300;
 display:block;
 line-height:1;
}
#navi .list-nav span.ja{
 font-size:0.75rem;
 display:block;
 text-align: center;
 line-height:2;
}

.flex{
 display:flex;
align-items: center;
}

#mainvisual .contact{
 position:absolute;
bottom:0;
right:120px;
 width:150px;
 height:150px;
background-color: #000;
border-radius:50%;
}
#mainvisual .contact a{
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 color:#fff;
}



#mainvisual .contact img{
 position:absolute;
 top:33px;
 left:50%;
 transform:translateX(-50%);
width:70px;
height:55px;

}
#mainvisual .contact p{
 position:absolute;
 left:0;
 right:0;
 text-align: center;
 bottom:33px;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/

#mainvisual {
 position: relative;
}

#mainvisual img {
 width: 100%;
 height: 897px;
 object-fit: cover;
}

/*ドロップシャドウ*/
.drop-shadow{
 box-shadow: 0px 4px 4px 0px #00000040;

}



/*
グラデーションを設定
*/

.gradation {
 position: relative;
}

.gradation::before {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: linear-gradient(90deg, transparent, #000);
}


/*
マスクを設定
*/

.mask {
 position: relative;
}

.mask::before {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(0, 0, 0, .5);
}


/*
テキストとボタンが画像の上に表示されるように「z-index」を設定
*/

#mainvisual .copy {
 position: absolute;
 top:50%;
 transform:translateY(-50%);
 left: 120px;
 z-index: 10;
}

#mainvisual .copy span.en {
 font-size:6rem;
 display: block;
 line-height:1.14;
}



#mainvisual .copy span.ja {
 font-size: 2.5rem;
 display: block;
 margin-top:50px;
 text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}



/*-------------------------------------------
your-goal
-------------------------------------------*/

#your-goal {
position:relative;

}
#your-goal .bg-logo{
 position:absolute;
 background-image:url("/img/logo-treatment.png");
background-position: 0% 0%;
background-repeat: no-repeat;
  background-size: contain;
  top:37px;
  left:-128px;
  width:420px;
  height:428px;
}
#your-goal .section-title {
 position:absolute;
 top:180px;
 left:240px;
 }
 #your-goal .left-content-box{
  position:relative;
  margin-top:100px;
  margin-left:380px;
 width:820px;
height:450px;
 }
 #your-goal .left-content-box .list-box{
  padding:115px 0 67px;
width:500px;
height:270px;

  }
 #your-goal .left-content-box .list-box  li{
 background-color: #F75E5E;
 margin-bottom:30px;
 line-height:45px;
 height:45px;

  }



#your-goal .left-content-box .list-box span.number{
 font-size:2rem;
 padding-left:50px;
 padding-right:20px;
 font-weight:bold;
 display:inline-block;
 vertical-align: top;
}
#your-goal .left-content-box .list-box .number-text{
 font-size:1.2rem;
 display:inline-block;

}

 #your-goal .left-content-box img{
 position:absolute;
 width:270px;
 height:400px;
 top:50px;
 right:50px;
 z-index:3;
 }


 #your-goal .bg-box{
  position:absolute;
  top:0;
  right:0;
  width:270px;
  height:400px;
background-color:  #BFB046;

 }

<div class="wrapper">
  <header id="header">
  <!-- メインビジュアル -->
  <div id="mainvisual">
   <div class="copy">
    <span class="en">ETELLIA</span>
    <span class="en">JUDO</span>
    <span class="en">CLUB</span>
    <span class="ja">心も体も鍛錬あるのみ</span>
   </div>
   <!-- /.copy -->

    <img src="/img/mainvisual.jpg" alt="メインビジュアル" class="drop-shadow">
  <nav id="navi">
    <div class="container flex">

<h1 class="site-title">
    <img src="/img/logo-navigation.png" alt="ロゴ" class="logo">
   </h1><!-- /.site-title -->
    <ul class="list-nav">
     <li><a href="#">
<span class="en">HOME</span>
<span class="ja">ホーム</span>
      </a>

      </li>
     <li><a href="#">
<span class="en">LEADERS</span>
<span class="ja">指導者紹介</span>
      </a>

      </li>
     <li><a href="#">
<span class="en">BLOG</span>
<span class="ja">ブログ</span>
      </a>

      </li>
     <li><a href="#">
<span class="en">CLASSES</span>
<span class="ja">クラス紹介</span>
      </a>

      </li>
     <li><a href="#">
<span class="en">HISTORY</span>
<span class="ja">道場の歴史</span>
      </a>

      </li>
     <li><a href="#">
<span class="en">MEMBER'S</span>
<span class="ja">会員様へ</span>
      </a>

      </li>

    </ul>
    <!-- /.list-nav -->
   </div><!-- /.container -->
      </nav>
   <!-- /#navi -->
<div class="contact drop-shadow">
<a href="#">
<img src="/img/mail-mark.png" alt="メール">
<p>お問い合わせ</p>
</a>
</div><!-- /.contact -->
  </div><!--/mainvisual-->
   <div class="hamburger js-hamburger">
    <span></span>
    <span></span>
    <span></span>
   </div>
   <!-- /.hamburger -->
   <div id="burger-musk"></div>
  </header>
  <!-- /#header -->
  <main>
   <section id="your-goal">
   <div class="container">
<div class="bg-logo">
 <h2 class="section-title color-black">
<span class="en">YOUR GOAL</span><!-- /.en -->
<span class="ja">エテリアの目指すもの</span><!-- /.ja -->
 </h2><!-- /.section-title -->
</div><!-- /.bg-logo -->
<div class="left-content-box">
 <ol class="list-box">
 <li><p class="number-text"><span class="number">01</span>他人の気持ちを理解する</p></li> <li><p class="number-text"><span class="number">02</span>礼儀やあいさつ</p></li>
 <li><p class="number-text"><span class="number">03</span>強靭な肉体と精神</p></li>
 <li><p class="number-text"><span class="number">04</span>他責しない</p></li>
</ol>

 <img src="/img/your-goal-right-picure.jpg" class="drop-shadow" alt="柔道で投げ飛ばす画像">
<div class="bg-box drop-shadow">
</div><!-- /.bg-box -->