CSS：Unsliderの上にテキストを重ねる

Question

3つの画像で非常に単純なUnslider設定をしましたが、その上にh1テキストをオーバーレイしようとしましたが、私がそうすると、divの上にスライダーの上に奇妙な水平スペースが表示されますSee image

<div class="photos" id="photos"> 
    <h1 class="photos-title">P H O T O G R A P H Y</h1> 
    <div class="my-slider"> 
     <ul> 
     <li><img src="images/image1.jpg" alt=""></li> 
     <li><img src="images/image2.jpg" alt=""></li> 
     <li><img src="images/image4.jpg" alt=""></li> 
     </ul> 
    </div> 
    </div> 

そして、私のCSS：

は、ここに私のコードです

.photos{ 
    width: 100%; height: 100vh; 
} 
.my-slider{ 
    width: 100%; height: 100vh; 
    margin: 0; padding: 0; 
    z-index: 0; 
} 
.photos-title{ 
    font-family: "Anton"; 
    position: relative; 
    z-index: 1; 
    margin: 0; padding: 0; 
    top: 50%; 
    transform: translate(0,-50%); 
} 

Answer 1

このスペースはタイトルのために予約場所で、 使用position:absolute

.photos-title { 
    position: absolute; 
} 
.photos{ 
    position: relative; 
}