How to set css for chrome and mozila for responsive design? <p>I am new to CSS, Bootstrap &amp; HTML.</p> <p>I am trying to display search-box on my web page, in Mozilla it works fine but in Chrome it is not working.</p> <p><strong>Here is the screen shot of Mozilla browser:</strong></p> <p><img src="https://i.stack.imgur.com/oY3XQ.png" alt="enter image description here"></p> <p><strong>and this is of Chrome:</strong></p> <p><img src="https://i.stack.imgur.com/wFUnl.png" alt="enter image description here"></p> <p>Also note that when i increase or decrease screen resolution the control's gets scattered badly .Following is HTML code snippet responsible for this display:</p> <pre><code>&lt;body&gt; &lt;section id="customers"&gt; &lt;div class="container" style="margin-top:0px;"&gt; &lt;div class="row"&gt; &lt;div class="col-lg-12 &lt;form class="form-inline" role="form" style="background:#eee"&gt; &lt;div class="form-group"&gt; &lt;input id="" class="leftText" type="text" value="" tabindex="1" name="query" autocomplete="off" placeholder="I am looking for" &gt;&lt;/input&gt; &lt;strong &gt;in&lt;/strong&gt; &lt;input id="" class="rigtTextBox" type="text" value="" tabindex="1" name="query" autocomplete="off" helptext="In the location" placeholder="In the location"&gt;&lt;/input&gt; &lt;select class="rightcitydropdown"&gt; &lt;option&gt;Mumbai&lt;/option&gt; &lt;option&gt;Pune&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;button class="btn btn-primary" id="srchBtn" &gt;Ask Me&lt;/button&gt; &lt;/div&gt;&lt;!--end of col-lg-12--&gt; &lt;/form&gt; &lt;/div&gt;&lt;!--end of row--&gt; &lt;/div&gt;&lt;!--end of container--&gt; &lt;/section&gt; &lt;/body&gt; </code></pre> <p>following in my CSS for above controls:</p> <pre><code> .leftText{ float :left; border-style:solid; border-width:5px; border-color:#989898 ; height:38px; } .rigtTextBox{ border-style:solid; border-width:5px; border-right-width:1px; height:38px; border-color:#989898 ; } .form-control{ border-style:solid; border-width:5px; border-left-width:1px; border-color:#eee; font-size:10px; height:30px; } .form{ border-width:5px; border-left-width:1px; border-color:#eee; font-size:10px; } .rightcitydropdown{ float:right; border-style:solid; border-width:5px; border-left-width:1px; border-color:#989898 ; margin-right:17px; background:white;height:38px; } #searchOuterdiv{ background:#F0F0F0; } #centralRow{ margin-top:3px; } strong { float:left; font-size:28px; margin:0px 10px 0 10px; height:30px; line-height:30px; color:#333333; } #srchBtn { background:#4682B4; font-size:18px; line-height:16px; border:none; width:125px; text-align:center;margin-top:6px; height:35px; padding-bottom:5px; cursor:pointer; color:#333; padding-top:0px; margin-left:7px;color:white} </code></pre> <p>So please, can any one tell me how to set CSS or correct written code to make responsive appearance.I want this page to be displayed on multiple resolution screens, say desktop,laptop,tablets e.t.c Thanks in advance.</p>