显示：阻止不起作用

Question

我的显示有问题：阻止项目 - 它们不显示：阻止。

我不知道问题出在哪里。我希望div与“panel”类一起显示在“clip-block”类下。我粘贴了显示：阻塞所有内容，不同的方式，没有任何效果。

我尝试了一切，我的代码现在看起来像这样：

HTML：

body {
  /*    font-family: 'Quicksand',
        sans-serif;*/
  background: url("seamless-1781533_1280_0.05.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  display: block;
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.col-sm-12 .col-md-12 .col-xs-12 {
  position: relative;
  display: block;
  text-align: center;
  padding-right: 5%;
}

.quote {
  display: block;
  position: absolute;
  margin-top: 4%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 70px;
  color: #4E4E4E;
  opacity: 0.9;
  background-color: rgba(210, 210, 210, 0.4);
  padding-left: 20px;
}

h2 {
  text-align: right;
}

.header {
  font-family: 'Anton', sans-serif;
}

.clip-svg {
  display: block;
  width: 0;
  height: 0;
}

.clip-first {
  display: block;
  font-family: 'Quicksand', sans-serif;
  width: 100%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.clip-second {
  display: block;
  font-family: 'Quicksand', sans-serif;
  width: 100%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.clip-third {
  display: block;
  font-family: 'Quicksand', sans-serif;
  width: 100%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

a:link {
  display: block;
  text-decoration: none;
}

.logo {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 130px;
  height: 130px;
  background: #222;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: translate(-110%, 130%);
  -ms-transform: translate(-110%, 130%);
  -webkit-transform: translate(-110%, 130%);
}

.clip-each {
  display: block;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 0 auto;
}

.clip-each-first {
  display: block;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 0 auto;
  transform: translate(0%, 30%);
  -ms-transform: translate(0%, 30%);
  -webkit-transform: translate(0%, 30%);
}

.clip-each-second {
  display: block;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 0 auto;
  transform: translate(55%, 10%);
  -ms-transform: translate(55%, 10%);
  -webkit-transform: translate(55%, 10%);
}

.clip-each-third {
  display: block;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 0 auto;
  transform: translate(-55%, -90%);
  -ms-transform: translate(-55%, -90%);
  -webkit-transform: translate(-55%, -90%);
}

a.clip-each-first:hover {
  display: block;
  background: #3071a9;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

a.clip-each-second:hover {
  display: block;
  background: #3071a9;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

a.clip-each-third:hover {
  display: block;
  background: #3071a9;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.clip-gradient {
  display: block;
  background: #383838;
  width: 130px;
  height: 130px;
}

.clip-gradient .clip-first {
  display: block;
  color: #fff;
}

.clip-gradient .clip-second {
  display: block;
  color: #fff;
}

.clip-gradient .clip-third {
  display: block;
  color: #fff;
}

@media only screen and (min-width: 50px) {
  .wrap {
    display: block;
    position: absolute;
    top: 20%;
    left: 70%;
    -ms-transform: translateY(-70%) translateX(-50%);
    -webkit-transform: translateY(-70%) translateX(-50%);
    transform: translateY(-70%) translateX(-50%);
  }
  .clip-block {
    display: table-cell;
    vertical-align: middle;
  }
}


/*.navigation {
        display: block;
        position: relative;
    }*/

.content {
  display: block;
}

.navigation .nav {
  display: block;
  position: relative;
}

.nav .panel {
  display: none;
  background: #222;
  margin-top: 20px;
}

.nav .panel.active {
  display: block;
}

#onas,
#zajmujemysie,
#oferta {
  margin-left: 50px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  width: 60%;
  letter-spacing: 1px;
  clear: both;
}

<body>
  <div class="navigation">
    <div class="header">
      <!--            <div class="row">-->
      <div class="quote">
        <h1>Great companies are built on great products.</h1>
        <h2>Elon Musk</h2>

      </div>
    </div>
  </div>
  <div class="nav">
    <section class="content">
      <div class="wrap">
        <div class="clip-block">

          <a href="#">
            <img class="logo" src="logo_polygon.png">
          </a>

          <a href="#" rel="onas" class="clip-each-first clip-gradient active">
            <div class="clip-first">O NAS</div>
          </a>

          <a href="#" rel="zajmujemysie" class="clip-each-second clip-gradient">
            <div class="clip-second">CZYM SIĘ ZAJMUJEMY</div>
          </a>

          <a href="#" rel="oferta" class="clip-each-third clip-gradient">
            <div class="clip-third">OFERTA</div>
          </a>

        </div>
        <!-- /clip-block -->
      </div>
      <div id="onas" class="panel active" align="justify">
        Nasza przygoda z technologią ...
      </div>
      <div id="zajmujemysie" class="panel" align="justify">
        To firma...
      </div>
      <div id="oferta" class="panel" align="justify">
        OFERTA - ...
      </div>
    </section>
  </div>
  <!--</div>-->
</body>