ReactJSによるスタイリングの問題

Question

私のウェブページのスタイリングに問題があります。私は私の反応の定型文のためにcreate-react-appリポジトリを使用しており、反応ブートストラップのためにreact-bootstrapリポジトリを使用しています。

私は私のページに<p></p>を使用するたびに、それは私のために、テキストを中心と私は私のコードで段落のスタイリングのこの種を持っている任意の親のdivを見つけることができません。ページのコードは次のとおりです。

class App extends Component { 
    render() { 
     return (
      <div> 
       <div className="container"> 
        <div className="col-lg-12"> 
         <div className="col-lg-5"> 
          <img className="img-responsive img-circle" src="http://placehold.it/120x120" alt=""/><br /> 
          <h3 className="lead text-justify text-white"> 
           Gulshan Jubaed Prince<br /> 
           <span>Partner, Techynaf</span> 
          </h3> 
          <p>Test paragraph.</p> 
         </div> 
         <div className="col-lg-7"></div> 
         <div className="col-lg-3"> 
          <div className="well"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

次に、Webブラウザの出力を示します。私はデバッグのために自分のスタイルシートにボックスの枠線を追加しました。

.container - ホワイトボックス

H3 - 黄色のボックス

H3スパン - 緑色のボックス

H3 + P - 赤いボックス

.containerに<p></p>タグが含まれていても、段落（赤い枠で囲んで）は、.container divの外に表示されます（白いボックスで囲まれています）。

そして、ここでボックスの境界線のためのスタイリングは、（質問のためには重要ではないかもしれません）です：

h3 span{ 
    font-size: 17px; 
    font-weight:lighter; 
    color: #CCC; 
    font-style: italic; 
    border: 1px solid green; 
} 
.container{ 
    border: 2px solid white; 
} 
h3 { 
    border: 1px solid yellow; 
} 
h3 + p { 
    border: 1px solid red; 
} 

私はTest ParagraphテキストParter Techynaf

Answer 1

の下.containerのdivと右の内側になりたい下さいあなたのCSSに

clear:both; 
float:left; 

が含ま

Answer 2

これを試してください：

.container{ 
    overflow:hidden; 
}