divのサイズを変更すると、コンテンツがなくなり、画面を水平に調整するスクロールバーが表示されます。 （サイトとワイド）

Question

こんにちは私は移動のための私のウィンドウのサイズを変更しようとすると、この問題が発生します：pseude要素：after：and before（私のタイトルの隣の2行）は、サイトから落ちて水平スクロールバーを作成しますユーザーのために（私はしたくない）。

my jsfiddle：https://jsfiddle.net/cvgua1s2/1/モバイルに問題のサイズを変更してみてください。

HTML：

<section class="slogan wow"> 
     <h1 class="slogantitel wow fadeIn"> Ontdek ons</h1> 
    </section> 

はCSS：

.slogan { 
    position: relative; 
    height: 30%; 
    min-height:100px; 
    width: 100%; 
    margin-top: 100px; 
} 

.slogan-content { 
    text-align: center; 
} 

h1.slogantitel { 
    font-size: 4em; 
    text-align: center; 
    margin: 0; 
    color: rgb(95,55,17); 
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.slogantitel:before, .slogantitel:after { 
    content: ""; 
    display: inline-block; 
    width: 10%; 
    margin: 0 .5em 0 -55%; 
    vertical-align: middle; 
    border-bottom: 1px solid; 
} 

.slogantitel:after { 
    margin: 0 -55% 0 .5em; 
} 

Answer 1

がh1.slogantitelためoverflow: hidden;を追加しようと、それが表示され、H-スクロールバーを防ぐことができます。

Answer 2

try overflow：hidden; h1タグの場合

.slogan { 
 
    position: relative; 
 
    height: 30%; 
 
    min-height:100px; 
 
    width: 100%; 
 
    margin-top: 100px; 
 
} 
 

 
.slogan-content { 
 
    text-align: center; 
 
} 
 

 
h1.slogantitel { 
 
    font-size: 4em; 
 
    text-align: center; 
 
    margin: 0; 
 
    color: rgb(95,55,17); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.slogantitel:before, .slogantitel:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 10%; 
 
    margin: 0 .5em 0 -55%; 
 
    vertical-align: middle; 
 
    border-bottom: 1px solid; 
 
} 
 

 
.slogantitel:after { 
 
    margin: 0 -55% 0 .5em; 
 
}

<section class="slogan wow"> 
 
      <h1 class="slogantitel wow fadeIn"> Ontdek ons</h1> 
 
     </section>

Answer 3

このための最善の解決策は、モバイルでのフォントを減らすことになる、それはモバイルに完全に収まるということです。

h1.slogantitel { 
    font-size: 1em; 
}