Logo image and searchbox using bootstrap are overlapping upon resizing browser window

Question

So I am trying to put the logo image(543 * 183) pixels in line with a search box, as per given on Bootstraps's grid system overview I am using the following:

Here is the Bootply

1 row with 2 columns:

<div class="container">
    <div class="row">    
        <div class="col-xs-6 col-lg-6">
            <img src="Icon.png" class="logo img"/>
        </div>
        <div class="col-xs-6 col-lg-6">
                <input class="top-search" type="text" placeholder="Search">
        </div>
    </div>  
</div>    

below is the custom css applied after twitter bootstrap:

body {
    padding-left: 180px;
    padding-right: 250px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.logo {
   height: 80px;
   width: 300px;
}

.top-search {
    height: 50px;
    width: 400px;
    margin-top: 10px;
}

These seems to stack up inline well but upon resizing the browser window from the right the textbox goes over the image and eclipses it.

I want it to be responsive but the text box shouldn't eclipse the image in any window size. I tried using z-index for the text boxt to be 0 but it didn't help. IS there wway to get around it?

Answer 1

You can remove -200 left margin of top-search class. And change col-xs-6 to col-sm-6

bootply