CSSが反映されない

前提・実現したいこと

フリマの様なアプリのマークアップをしています。

footer__topのCSSを反映させたい。
BEMにしたがって作成しています。

発生している問題

footerのCSSは反応するが、
topから反応しない。

index.html.erb

<body>
  <header class="header">
    <div class="header__top">
      <div class="header__top__main">
        <a href="#">
          <img src="/logo/logo.png"class="header__top__main__tag">
        </a>
        <form class="header__top__main__searchBox">
          <input class="header__top__main__searchBox__input-text" placeholder="キーワードから探す" type="text">
          <button class="header__top__main__searchBox__button" type="submit">
            <img src="/icon/icon-search 1.png" class="header__top__main__searchBox__button__search">
          </button>
        </form>
      </div>
      <div class="header__top__navi">
        <ul class="header__top__navi__listsLeft">
          <a class="header__top__navi__listsLeft__categori" id="catBtn" href="#">カテゴリー</a>
          <a class="header__top__navi__listsLeft__branded" id="catBtn" href="#">ブランド</a>
        </ul>
        <ul class="header__top__navi__listsRight">
          <a class="header__top__navi__listsRight__login" href="#">ログイン</a>
          <a class="header__top__navi__listsRight__signUp" href="#">新規会員登録</a>
        </ul>
      </div>
    </div>
  </header>

  <main>main</main>
  <aside class="appBanner">appBanner</aside>


  <footer class="footer">
    <div class="footer__top">
      <div class="footer__top__main">
        <div class="footer__top__main__contents">
          <h2 class="footer__top__main__contents__head">FURIMAについて</h2>
          <ul class="footer__top__main__contents__">
            <li>
              <a href="#">会社概要（運営会社）</a>
            </li>
            <li>
              <a href="#">プライバシーポリシー</a>
            </li>
            <li>
              <a href="#">FURIMA利用規約</a>
            </li>
            <li>
              <a href="#">ポイントに関する特約</a>
            </li>
          </ul>
        </div>
        <div class="footer__top__main__contents">
          <h2 class="footer__top__main__contents__head">FURIMAを見る</h2>
          <ul>
            <li>
              <a href="#">カテゴリー一覧</a>
            </li>
            <li>
              <a href="#">ブランド一覧</a>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="footer__top__main__contents">
          <h2 class="footer__top__main__contents__head">ヘルプ＆ガイド</h2>
          <ul>
            <li>
              <a href="#">FURIMAガイド</a>
            </li>
            <li>
              <a href="#">FURIMAロゴ利用ガイドライン</a>
            </li>
            <li>
              <a href="#">お知らせ</a>
            </li>
            <li></li>
          </ul>
        </div>
      </div>
      <a href="#">
        <img src="/logo/logo-white.png" class="footer__top__logo">
      </a>
      <div class="footer__top__label">
        <p>© FURIMA</p>
      </div>
    </div>
  </footer>
  <%# <a href="#">
    <div class="purchaseBtn">
      <span class="purchaseBtn__text">出品する</span>
      <img class="purchaseBtn__icon" src="/assets/icon_camera-968c5ebaa05319bf1e2ad7508f852dd712504a4d26a1930d8bd87ec03ebcc37a.svg">
    </div> %>
  <%# </a> %>
</body>

items.scss

body {
  margin: 0px;
}

.header {
  height: 100px;
  padding: 0px 60px;
  margin-bottom: 10px;
  &__top {
    &__main {
      max-width: 1040px;
      width: 100%;
      margin: 0 auto;
      padding: 15px 0 0;
      display: flex;
      &__tag {
        height: 40px;
        width: 140px;
        margin-right: 30px;
        cursor: pointer;
      }
      &__searchBox {
      position:relative;
      width: 100%;
      height: 36px;
      display: flex;
      margin-top: 5px;
        &__input-text {
          width : 100%;
          font-size: medium;
          padding: 0 0 0 5px;
          margin-right:36px;
        }
        &__button {
          position:absolute; top:0px;right: 0px;
          width: 36px;
          height: 36px;
          background-color: #3CCACE;
          border: 0px;
          cursor: pointer;
          &__search {
            height: 20px;
            width: 20px;
          }
        }
      }
    }
    &__navi {
      max-width: 1040px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      font-size: 14px;
      line-height: 38px;
      position: relative;
      &__listsLeft {
        padding-left: 0;
        margin: 0;
        &__categori {
          padding-right: 30px;
        }
        &__branded {
          padding-right: 30px;
        }
      }
      &__listsRight {
        position: absolute; right:0px;
        padding-left: 0;
        margin: 0;
        &__login {
          padding-left: 16px;
        }
        &__signUp {
          padding-left: 16px;
        }
      }
    }
  }
}

a {
  text-decoration: none;
}


main {
  height: 300px;
}

.appBanner {
  height: 300px;
}

footer {
  padding:60px 0px;
  &__top {
    margin: 0px 300px;
    display: inline;
    &__main{
      height: 172px;
      &__contents {
        max-width: 840px;
        margin: 0 auto;
        &__head {
        }
      }
    }
    &__logo {
      margin: 0 auto;
      &__tag {
        height: 40px;
        width: 140px;
      }
    }
    &__label {
    }
  }
}