ReactJS的样式问题

Question

I am having trouble with the styling of my webpage. I am using create-react-app repo for my react boilerplate and react-bootstrap repo for my react bootstrap.

Whenever I use a <p></p> in my page, it centers the text for me and I can't find any parent div that has this sort of styling for the paragraph in my code. Here's the code for the page.

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>
        );
    }

And here's the output on the web browser. I have added box borders in my style sheet for debugging purposes.

.container - white box

h3 - yellow box

h3 span - green box

h3 + p - red box

Note that the paragraph (enclosed in red border) is displayed outside of the .container div (enclosed with white box) even though the .container is containing the <p></p> tags.

And here's the styling for the box borders (might not be important for the question):

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

I want the Test Paragraph to be inside the .container div and right underneath the text Parter Techynaf

Answer 1

Please include

clear:both;
float:left;

in your css

Answer 2

Please try this:

.container{
    overflow:hidden;
}