リサイズ時に画像と同じ位置にテキストを置く方法は？

Question

イメージのサイズが変更されたときに、イメージのサイズを変更したときにテキストがイメージに対して同じ位置にとどまるようにするにはどうすればよいですか。フッターテキストには、列間に同じスペースを含める必要があります。私は今、得たものをここで

：画像が小さくなったとき、テキストが同じ場所に滞在していません

full size

Resized

は、どのように私は同じ場所でのテキストの滞在を作るのですか？

これは私のコードです：

HTML

<div id="header"> 
    <div class="container-fluid"> 

     <div class="row"> 
      <div class="col-md-6 logo"> 
       <!-- LOGO --> 
       <a href="/" class="navbar-brand navbar-left"> 
        <div class="logo"><img src="img/logo.png" alt="LOGO"></div> 
       </a> 
      </div> 
      <div class="col-md-6" id="text"> 
       <h1>DELIVERING SPRING 2017</h1> 
      </div> 
     </div> 

     <!-- VIDEO--> 

     <div class="container" id="container"> 
      <div class="row"> 
       <div align="center" class="embed-responsive embed-responsive-16by9"> 
        <video autoplay loop class="embed-responsive-item"> 
         <source src="CannonStreet_Timelapse_1280.mp4" type="video/mp4"> 
        </video> 
       </div> 
      </div> 
     </div> 

     <!-- FOOTER--> 

     <section id="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-2 left-col"> 
         <p><a class="contacts" href="#">CONTACTS</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>STUART LAWSON</h2> 
         <p>20 7409 8920</p> 
         <p>07870 555 930</p> 
         <p><a class="email" href="#">slawson@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>JOSH LAMB</h2> 
         <p>020 7409 8891</p> 
         <p>07976 988 486</p> 
         <p><a class="email" href="#">jlamb@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>SAM BOREHAM</h2> 
         <p>020 7710 7963</p> 
         <p>07917 635 465</p> 
         <p><a class="email" href="#">samb@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>DAN ROBERTS</h2> 
         <p>020 7710 7963</p> 
         <p>07801 143 909</p> 
         <p><a class="email" href="#">danr@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 right-col"> 
         <h2><a class="info" href="#">info@theriverbuilding.com</a></h2> 
        </div> 
       </div> 
      </div> 
     </section> <!-- END END FOOTER --> 
    </div> 
</div> 

CSS

body { 
    background: url("../img/background.jpg")no-repeat ; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


/***HEADER**/ 

.logo img { 
    margin: 40px 45px; 
} 

h1 { 
    font-family: 'GothamMedium', sans-serif; 
    position: absolute; 
    right: 45px; 
    top: 150px; 
    font-size: 1.55em; /*19pt in psd*/ 
    color: #ffffff; 
} 

/***VIDEO***/ 

#container { 
    padding-top: 200px; 
} 


/*** FOOTER ***/ 

.col-md-2 { 

} 

#footer { 
    padding: 100px 45px 0; 
} 

.left-col { 
    padding: 110px; 
    margin-left: -75px; 
} 

.right-col { 
    padding: 86px; 
    position: absolute; 
    right: 76px; 
} 

#footer p { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .email { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .contacts { 
    font-size: 1.063em; /*13pt in psd*/ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
} 

#footer h2 { 
    font-family: 'GothamBook', sans-serif; 
    font-size: 1.063em; /*13pt in psd*/ 
    color: #ffffff; 
} 

#footer a:hover { 
    color: #0e6655; 
    outline: none; 
} 

#footer .info { 
    font-family: 'GothamMedium', sans-serif; 
    color: #ffffff; 
    font-size: 1.5em; /*15pt in psd*/ 
} 

/***MEDIA QUERIES***/ 

@media(max-width: 400px){ 
    #header .logo img{ 
     margin: 15px 0 20px; 
     height: 100px; 
    } 
    #header h1{ 
    font-size: 15px; 
    text-align: center; 
    margin-left: 0; 
    margin-right: 0; 
    } 
    .left-col { 
     padding: 0 0 0 0; 
    } 

    .right-col { 
     padding: 0 ; 
     font-size: 12px; 
    } 
} 

@media(max-width: 768px){ 
    #header .logo img{ 
     margin: 15px 0 20px; 
     height: 120px; 
    } 
    h1{ 
     font-family: 'GothamMedium', sans-serif; 
     position: absolute; 
     right: 45px; 
     top: 165px; 
     font-size: 1.55em; /*19pt in psd*/ 
     color: #ffffff; 
    } 
    #footer{ 
     text-align: center; 
    } 
    .info{ 
     padding-top: 50px; 
    } 
    .left-col { 
     text-align: center; 
     margin-left: 0; 
     margin-right: 0; 
     padding-top: 0; 
    } 
    .right-col { 
     padding: 86px; 
     position: absolute; 
     right: 45px; 
    } 
} 

@media(max-width: 1400px){ 
    .logo img { 
     margin: 40px 45px; 
    } 
    h1 { 
     font-family: 'GothamMedium', sans-serif; 
     right: 45px; 
     top: 150px; 
     font-size: 1.55em; /*19pt in psd*/ 
     color: #ffffff; 
     text-align: center; 
    } 
    #footer .info { 
     font-family: 'GothamMedium', sans-serif; 
     color: #ffffff; 
     font-size: 1.5em; /*15pt in psd*/ 
     margin-left: -50px; 

    } 
    #footer .contacts { 
     font-size: 1.063em; /*13pt in psd*/ 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
    } 
    #footer p { 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
     font-size: 1.063em; /*13pt in psd*/ 
    } 
    #footer .email { 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
     font-size: 1.063em; /*13pt in psd*/ 
    } 
    .right-col { 
     padding: 86px; 
     position: absolute; 
     right: 45px; 
    } 
} 

Answer 1

私はクラスの "行" と "MD-COL-6" 嘘を設定します：

.row { 
width: 100%; 
display: block; 
position: relative; 
} 

.row .md-col-6 { 
position: absolute; 
top: 50px; 
right: 100px; 
} 

これらすべての要因は、達成したい場所に基づいています。

Answer 2

ヨールのCSSの最後にこれを入れて試してみてください。

#footer * { 
     margin-left: 2%; 
    }