リンクが機能せず、クリックできない

Question

私はウェブサイト上で私の 'a'要素（ボタン）を押しています。彼のポジションはビデオセクションにあります。なぜクリックできないのか分かりません。私はどの要素でも位置の変更を試みましたし、Z-インデックスも試みました。私はブートストラップ-3を使用しています。以下のコード：

<section id="video"> 
    <div class="video-container"> 
    <h2>Hi I'm Matt </h2> 
    <h3> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum eum doloribus, consequuntur nihil quod pariatur dolor labore amet consequatur quia. 
    </h3> 
    <a href="#about-me">Let's start</a> 
    </div> 
    <video autoplay loop muted id="video"> 
    <source src="video/coding.webm" type="video/webm"> 
    <source src="video/coding.mp4" type="video/mp4"> 
    <source src="video/coding.ogg" type="video/ogg"> 
    </video> 
</section> 

     /* ************ LESS ************ */ 
    @small: ~'only screen and (min-width: 768px)'; 
    @medium: ~'only screen and (min-width: 992px)'; 
    @large: ~'only screen and (min-width: 1400px)'; 

    @brand-primary: #f6c664; 
    @bright-text-color: #FFF; 

    .relative { 
     position: relative; 
    } 

    .absolute { 
     position: absolute; 
    } 

    .inline-block { 
     display: inline-block; 
    } 

    .block { 
     display: block; 
    } 

    .upper { 
     text-transform: uppercase; 
    } 

    .heading-decor-line { 
     &:after { 
       content: ''; 
       .absolute; 
       .block; 
       top: 100px; 
       left: 15px; 
       width: 80px; 
       height: 6px; 
       z-index: -1; 
       background: @brand-primary; 
     } 
    } 

    .btn { 
     .upper; 
     font-weight: 700; 
     padding: 12px 20px; 
     font-size: 14px; 
     line-height: 1.4; 
     border-radius: 4px; 
    } 

    /* ************ STYLES ************ */ 
    #video { 
     .relative; 
     top: 20px; 
     right: 0; 
     bottom: 0; 
     width: 100%; 
     z-index: -10; 
     &:after { 
       content: ""; 
       z-index: 0; 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       width: 100%; 
       height: 99%; 
       background: rgba(30, 30, 30, 0.8) none repeat scroll 0px 0px; 
     } 
    } 

    .video-container { 
     top: 30%; 
     left: 15%; 
     .absolute; 
     z-index: 1; 
    } 

    .video-container h2 { 
     font-size: 2rem; 
     margin: 0; 
     color: #FFF; 
     .relative; 
     z-index: 2; 
     text-transform: none; 
     .heading-decor-line; 
    } 

    .video-container a { 
     display: none; 
    } 

    .video-container h3 { 
     .relative; 
     .block; 
     top: 10px; 
     z-index: 2; 
     color: @bright-text-color; 
     font-size: 0.9rem; 
     width: 80%; 
     text-transform: none; 
     font-weight: 300; 
    } 

    .video-container { 
     @media @small { 
       h2 { 
        font-size: 5rem; 
        margin: 0px 0px 40px; 
       } 
       h3 { 
        font-size: 1.6rem; 
        top: 20px; 
       } 
       a { 
        .relative; 
        color: @bright-text-color; 
        background-color: @brand-primary; 
        text-decoration: none; 
        .inline-block; 
        z-index: 30; 
        .btn; 
        top: 30px; 
       } 
     } 
     @media @medium { 
       h2 { 
        font-size: 6rem; 
        margin: 0px 0px 70px; 
       } 
       h3 { 
        font-size: 2rem; 
        top: 20px; 
       } 
       a { 
        top: 60px; 
       } 
     } 
    } 

ご協力いただきありがとうございます。

Answer 1

まず、アンカー要素はどこにリンクされていますか？ href属性はidを指し、#about-meを指します。コード内のどの要素にはidが含まれていますか？ StackOverflowのに歓迎

<a href="#about-me" class="btn btn-default">Let's start</a>