ブートストラップ3 HTML形式のCss

Question

私はそれが続く

画像として表示する必要がある私は、ブートストラップ3

を使用しています小さな問題を抱えています - ユーザ名----------- -------------------------------場所

フルスクリーンでは、約3インチのギャップがありますあなたがそれをダウンサイズを変更するときの画像とユーザ名は、ユーザ名の最初の文字は、divの領域における余地があるときに、1000pxの周りに画像の上に行きます。私はブロックとしてイメージを表示しようとしたが、まだ運がない。私はイメージとユーザー名が約15pxであることを望みます。互いに離れる私のブレークポイントまで。

私の第二の問題は、私が研究したが、ブレークポイントの背景画像の変更は、それが白に点滅しますが、エクスプローラやクロームでこれをしないときのFirefoxで、何も見つかりませんでした。

HTML

<div id="profile-hero-background" class="profile-hero-background"> 
<div class="container-fluid"> 
    <div class="row"> 
      <div class="col-md-12">  
      <div class="row"> 
       <div class="col-md-2"> 
        <img class="img-insignia" src="content/media/insignia/r1.png"> 
       </div> 
       <div class="col-md-5"> 
             <p>Moderator</p> 
        <h1>Jeff</h1> 
       </div> 
       <div class="col-md-5"> 
             <p>Location</p> 
        <h1>United States</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

#profile-hero-background { 
    background-color: #000; 
    height: 500px; 
} 
.profile-hero-background { 
    background-image:url(../images/hero-bg1.jpg); 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: cover; 
} 


.img-insignia { 
    display: block; 
    height: 150px; 
    width: auto; 
} 


@media (max-width: 992px) { 



    .profile-hero-background { 
    background-image:url(../images/hero-bg2.jpg); 
    background-color: #000; 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: cover; 

} 
} 

Answer 1

変更してみてください

<div class="container"> 

とあなたが終わる

</div> 

を逃します