Layout not adapting in chrome mobile emulator

Question

I am trying to build a responsive form for mobile first application but somehow its not working correctly.When i resize it in the browser it adapts correctly but when i use it in the chrome mobile emulator it does not adapt to screen size

APPLICATION

FIDDLE DEMO ISOLATING FORM

1. The margin attrib of .row class makes page margin negative why is this happening i am finding this perplexing Margin negative

2. Secondly in mobile view the pages are not rendering as when browser is resized to mobile size

3. Thirdly there is white space below the table

Why is this happening???

 <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="input-group">   <span class="input-group-addon "><i class="glyphicon glyphicon-map-marker"></i></span>

                        <input type="text" id="gmap_where" name="gmap_where" class="form-control" placeholder="Where">  <span class="input-group-btn">
                    <button id="button2" class="btn   btn-success" onclick="findAddress(); return false;" type="button">Search for address</button>
                    </span>

                    </div>
                </div>
                <div class="form-group">
                    <label for="gmap_keyword">Keyword (optional):</label>
                    <input class="form-control" id="gmap_keyword" type="text" name="gmap_keyword" />
                </div>
                <div class="form-group">
                    <label for="gmap_type">Type:</label>
                    <select class="form-control" id="gmap_type">
                        <option value="art_gallery">art_gallery</option>
                        <option value="atm">atm</option>
                        <option value="bank">bank</option>
                        <option value="bar">bar</option>
                        <option value="cafe">cafe</option>
                        <option value="food">food</option>
                        <option value="hospital">hospital</option>
                        <option value="police">police</option>
                        <option value="store">store</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="gmap_radius">Radius:</label>
                    <select class="form-control" id="gmap_radius">
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="1500">1500</option>
                        <option value="5000">5000</option>
                    </select>
                </div>
                <input type="hidden" id="lat" name="lat" value="40.7143528" />
                <input type="hidden" id="lng" name="lng" value="-74.0059731" />
                <input type="hidden" id="FirstDestination" name="FirstDestination" value="" />
                <div class="form-group">
                    <div id="button1" class="btn btn-success" onclick="findPlaces(); return false;">Search for objects</div>
                </div>
            </form>
        </div>
    </div>

Answer 1

Add <div class="container"></div> around the HTML for the grid to solve the negative margin issue, and to get your rows to resize properly as the resolution changes.

http://jsfiddle.net/degoeym/g6ft1tcv/

http://codepen.io/anon/pen/jexlz

This is stated very clearly in bullet one regarding the grid system for Bootstrap:

http://getbootstrap.com/css/#grid

You can also use the class container-fluid if you want to make your form extend to the edges of the window/container without being cut off, if that's what you're wanting.

Anything else you need regarding margins/gutters/spacing should be answerable by reading the documentation for the Grid system, and possibly the documentation for Forms as well.