位置：粘性导航栏一旦碰到Card-2 <div>，就会停止

Question

我的文件中有很多代码，我将尝试仅在粘性导航栏确定其不希望随窗口滚动的位置给出代码。似乎card-2的容器元素是一堵墙。

HTML：

<nav id="main-nav">
  <h1 class="name">Dylan Sieren</h1>
  <ul class="main-ul">
    <li class="main-li">
      <a class="main-links" href="#">home</a>
    </li>
    <li class="main-li">
      <a class="main-links" href="#">resume</a>
    </li>
    <li class="main-li">
      <a class="main-links" href="#">about</a>
    </li>
  </ul>
  <ul class="contact-ul">
    <li class="contact-li">
      <a class="contact-link" href="#">contact</a>
    </li>
  </ul>
</nav>

CSS：

#main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 100%;
  position: sticky;
  top: 0%;
  z-index: 100;
  padding-top: 5px;
}    
.main-ul {
  display: flex;
  text-transform: uppercase;
  list-style: none;
  padding: 0;
  margin: 0;
}    
li.main-li {
  padding: 0 25px;
}    
a.main-links {
  font-size: 1.3em;
  text-shadow: 2px 2px 2px #fff;
  font-family: "Anton", sans-serif;
  position: relative;
  cursor: pointer;
  color: rgb(43, 43, 43);
  text-decoration: none;
  padding: 0;
} 

这是Card-2 <div>容器，它停止position: sticky导航栏，就像撞到了砖墙一样。

.card-2 {
  align-content: center;
  background: rgb(227, 230, 235);
  justify-content: space-evenly;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}