title: Google Maps embed overlapping with sticky nav-bar
body: <p>Kinda unsure on how to deal with this. Struggling to find the piece of HTML in the automatically generated HTML code that is used for the imbed.</p>
  
  <p>Here it is.</p>
  
  <pre><code>&lt;div id="wrapper_script"&gt;
  &lt;script src='https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=AIzaSyDeXmCynoz5WyHNOSdME2F0CgQrXoj-ecg'&gt;&lt;/script&gt;
  &lt;div style='overflow:hidden;height:400px;width:800px;'&gt;
    &lt;div id='gmap_canvas' style='height:400px;width:800px;'&gt;&lt;/div&gt;
    &lt;style&gt;#gmap_canvas img{max-width:none!important;background:none!important}&lt;/style&gt;
  &lt;/div&gt;
  &lt;a href='https://embedmaps.org/'&gt;google maps widget html&lt;/a&gt;
  &lt;script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=abb348039bcaaa22664b69e613b04fdd8887cf2f'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
   function init_map(){
    var myOptions = {zoom:13,center:new google.maps.LatLng(52.0833,4.2999999999999545), mapTypeId: google.maps.MapTypeId.ROADMAP};
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.0833,4.2999999999999545)});
    infowindow = new google.maps.InfoWindow({content:'&lt;strong&gt;Club Magenta&lt;/strong&gt;&lt;br&gt;&lt;br&gt; The Hague&lt;br&gt;'});
    google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
    infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because of this, it overlaps with my nav-bar.
  <a href="https://i.imgur.com/6L6ske5.png" rel="nofollow noreferrer">http://i.imgur.com/6L6ske5.png</a></p>
  
  <p>Any idea what CSS I could use to stop this from happening? I was thinking of using the z-index but I'd be unsure as to where to put the value, and which ones to use.</p>