what to do if your tile is not showing perfectly in HTML&CSS page?

I have tried many things an checked code many time but it isn't showing as it suppose to show. kindly suggest any solution. I am also attaching.

 <div class="container" id="main-content">
  <div class="jumbotron">
   <img alt="picture of restaurant" class="img-responsive visible-xs" src="C:\Users\LENOVO\Desktop\HIMANSHU\html css project\images\jumbotron_768.jpg"True>
  </div>
  <div class="row" id="home-tiles">
   <div class="col-md-4 col-sm-6 col-xs-12">
    <a href="menu-categories.html">
     <div id="menu-tile">
      <span>
       menu
      </span>
     </div>
    </a>
   </div>
   <div class="col-md-4 col-sm-6 col-xs-12">
    <a href="single-category.html">
     <div id="specials-tile">
      <span>
       specials
      </span>
     </div>
    </a>
   </div>
   <div class="col-md-4 col-sm-12 col-xs-12">
    <a href="https://www.google.com/maps/place/David+Chu's+China+Bistro/@39.3635874,-76.7138622,17z/data=!4m6!1m3!3m2!1s0x89c81a14e7817803:0xab20a0e99daa17ea!2sDavid+Chu's+China+Bistro!3m1!1s0x89c81a14e7817803:0xab20a0e99daa17ea" target="_blank">
     <div id="map-tile">
      <iframe allowfullscreen="" frameborder="0" height="250" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3084.675372390488!2d-76.71386218529199!3d39.3635874269356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c81a14e7817803%3A0xab20a0e99daa17ea!2sDavid+Chu's+China+Bistro!5e0!3m2!1sen!2sus!4v1452824864156" style="border:0" width="100%">
      </iframe>
      <span>
       map
      </span>
     </div>
    </a>
   </div>
  </div>
 </div>