Bootstrap text is overlapping on a image even when the columns are divided properly

Issue

Text with column width of col-lg-5 col-md-3are overlapping on the image of col-lg-5 col-md-3. Why is this happening is it a compulsion that I must use a container tag in Bootstrap and here is the JSfiddle link https://jsfiddle.net/oukdwoot/7/

---

HTML

<header>
    <div class="wrapper">
        <img src="https://placehold.it/84x33">
        <ol class="menu">
            <li><a href="">Contact</a>

            </li>
            <li><a href="">Work</a>

            </li>
            <li><a href="">About</a>

            </li>
            <li><a href="">Journal</a>

            </li>
        </ol>
    </div>
    <div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307">
            </div>
            <div class="col-lg-5 col-sm-3">
                    <h2>Duis aute irure dolor in henderit in voluptate.</h2>

                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...</p>
            </div>
        </div>
    </div>
</header>

---

css

header {
    background: #242424;
    width: 100%;
    height: 126px;
    border-bottom: 4px solid #1e1e1e;
}
header .wrapper img {
    display: inline-block;
    margin-top: 49px;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 8%;
}
.menu {
    display: inline;
}
.menu li {
    display: inline-block;
    list-style: none;
    float: right;
    width: 15%;
    margin: 0;
    padding: 0;
    border-left: 2px solid #1e1e1e;
    padding: 55px 0 50px 0;
    text-align: center;
    vertical-align: center;
    color: white;
    font:bolder 1em Helvetica, arial, serif;
    letter-spacing: 2px;
}
.menu li:first-child {
    border-right: 2px solid #1e1e1e;
}
.menu li a {
    color: white;
    text-decoration: none;
}
.menu li:hover {
    border-bottom: 4px solid #58C93A;
    color: #58C93A;
    background: #262626;
}
.main-wrapper {
    width: 70%;
    margin: 0 auto;
}

Solution

You may want to use the img-responsive class. It just the image is overflowing outside of the bootstrap DIV, which is normal behaviour in CSS for images.

<div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307" class="img-responsive">

Plus, it makes your image... responsive.

Answered By - Piotr Kula