親がコンテンツの幅を調整していないのはなぜですか？

Question

私は本当に疲れているかもしれませんが、私の人生ではdisplay: inline-blockが親の幅をその内容のサイズに合わせるように働かない理由を理解できません。私は他のソリューションを探してみましたが、私が見つけたすべてのリソースは、親にinline-blockを追加することがそのトリックを行うべきだと言います。以下の例で

、私は青い四角形のみ緑色の正方形の縁まで延び、その後最終的margin: 0 auto;を介してコンテンツをセンタリングするためにしようとしています：

#intro { 
 
    height: 400px; 
 
    background-color: red; 
 
} 
 
.slide-txt { 
 
    display: inline-block; 
 
    width: 30%; 
 
    background-color: lime; 
 
} 
 
.slide-box { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    background-color: blue; 
 
}

<section id="intro" class="image-slider"> 
 
    <div class="container" id="intro-slide"> 
 
    <div class="slide-box">  
 
     <img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px"> 
 

 
     <div class="slide-txt"> 
 
     <h1 class="title">Headline <span>Goes Here</span></h1> 
 
     <div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
      <a class="btn" href="#"> 
 
      Learn More 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://jsfiddle.net/eam0mk47/

Answer 1

div子に

Answer 2

その赤い#introは、クラス.container ...のdivです。この要素は、ブートストラップを介して左右にパディングしています。

はちょうどそのパディング削除： https://jsfiddle.net/eam0mk47/1/

#intro .container { 
    padding: 0px; 
} 

するか、そこにそのクラスを使用しないでください。親のdivはそれを避けるためにそう、他の70％を埋めるために拡大させると、それはあなたが％の代わりにピクセルを使用する必要がある内容に応じて調整するようになります（を.slideが-TXT）のdiv子にwidth:30%;を使用して