css3 - responsive design with bootstrap -

i m trying have responsive page has 2 buttons on top , supposed centered. under buttons added google map should cover rest of page. when try code bellow, buttons not centered , not responsive. , somehow map height longer page scrollbar shows up. , ideas m doing wrong ?

<div class="container">             <div class="row">                 <div class="col-md-4 center-block">                     <button >click me</button>                     <button >click me</button>                 </div>             </div>             </div>          <div class="map_container">             <div id="googlemap" class="map_canvas"></div>         </div> 

css

.map_container{      overflow:hidden;     padding-bottom:56.25%;     position:relative;     height:0; } .map_container .map_canvas{      left:0;     top:0;     height:100%;     width:100%;     position:absolute; } 

two part question/answer:

1. the .center-block class sets margin-right: auto; margin-left: auto; browser render "block" centred assuming width know. works <img width=" tag, undefined-width <div> not of know width, browsers ignore margin:auto. there 2 ways fix this:

   a. create innner div fixed width, i.e. <div style="width:200px">..buttons..</div>

   b. (html5 proponents wince @ this, but...) <center> tag deprecated in html5 still works in browsers know of. e.g. <center>..buttons..</center> - if works why not.

2. harder answer because there several things cause misbehaviour , don't know (from example) effect you're trying produce:

   a. .map_canvas{ height:100%; width:100%; } - not sure why? width , height percentages use ancestor object metrics, w=100% use full width of viewport (expected) , h=100% use full height of viewport, meaning total combined height of map-container , container+buttons above it.

   b. .map_container{ height:0; } - not sure why? there should never reason - either display:none or height: auto|length|initial|inherit.

   c. .map_container{ position:relative; } -> .map_canvas{ position:absolute; } ??? not sure you're doing there? have @ #21022512 has fiddle --- if that's remember up-vote it.

ps: try asking 1 question @ time - stackexchange users may know answer 1 , not other , may not answer @ all. and.., use jsfiddle.com create reproduction of issue. post link in question.