<a>タグの半分だけがリンクされています

Question

クリック可能なヘッダーを持つ2つの列ボックスを作成しようとしています。私はセットアップと作業のすべてを持っていますが、私がテストしていたときに、ヘッダの半分だけがクリック可能であることを認識しました。左の列では、左半分がクリック可能です。右の列には、右半分がクリック可能です。 'a'タグはヘッダー全体に適用されます。

<section class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div> 
       <div class="item-block"> 
        <a href="#"><h3 class="block-header">#</h3></a> 
        <p>#</p> 
       </div>  
      </div> 
     </div> 
    </section> 

私はレイアウトの写真を追加しました。各項目ブロックの上部には、青色のバーであるブロックヘッダがあります。赤い部分はリンクされている部分です。青い部分は何もしません。

CSS：ヘッダー全体がクリック可能であるように、この問題を解決する方法を誰もが

.item-block { 
    border: 2px solid #0026FF; 
    margin-left:20px; 
    margin-right:20px; 
    margin-bottom:20px; 
    border-radius: 6px; 
    font-size:1.2em; 
} 

.block-header { 
    text-align:center; 
    background:#0026FF; 
    padding:10px; 
    color:white; 
    margin-top:0px; 
    margin-bottom:10px; 
    border-radius: 3px 3px 0px 0px; 
} 

.item-block .block-header a { 
    color:white; 
    display:block; 
} 

を知っていますか？

Answer 1

問題は私のページの別の部分であることが分かりました。ページの下には、ページの中央にあるものと重なっている中央揃えの列があり、これらの半分が正しく機能しなくなりました。デュアルカラムのz-indexを中心カラムの上に置くように変更しました。