2つの要素を左右に整列させるブートストラップの問題

Question

Iamは、このポジショニング効果を画像上に実現しようとしています。左のテキストは、テキストの右下に画像の絶対位置を設定するためのパディングボトムと上部がありますが、正しく設定できません。助言がありますか ？

私はここに私のコードを共有します

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; height: auto; width: auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->

Answer 1

.luma-crew imgのためのいくつかのマージンを追加しました：;

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; /*height: auto; width: auto;*/ margin-left: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->

を（すなわち、マージン左100％）