对齐2个元素左右引导问题

Question

我试图在图片上实现这种定位效果。左边的文字有一些填充底部和顶部的文字和位置绝对的图像在右侧但我无法正确实现它。有什么建议吗？

我将在这里分享我的代码

.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增加了一些余量（即，保证金左：100％;）

＆＃13;

＆＃13;

.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%; }

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;