DIV宽度不合逻辑地卡住，无法更改

这是一个JSFiddle。
这是一个简单的<div>。在它里面，还有2个<divs>和一个<h2>。这很简单。我有较低的<div>的宽度- 谷歌地图一个(虽然它不工作在JSFiddle) -完全相同的宽度，它的父<div>。它以前工作得很好。我真的不记得什么时候了，但我确信在添加我的<h2>和一些修改(也许?)之前，它和它应该的一样宽。现在，无论我做什么，它都停留在那个愚蠢的宽度上——尽管Maps仍然有效。

---

我试图删除<h1>标签，看看这是否是问题，但没有什么是固定的。我也尝试了许多其他的事情，但我就是不能让<div>回到它的正确宽度。这里是如果你想在这里而不是在JSFiddle上看到它的代码:
HTML,JavaScript(虽然JavaScript可能不重要，因为它不影响<div>的大小):

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(41.726371, 44.731433),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);

 #wrap-left {
   float: left;
   border: 1px solid black;
   margin-top: 60px;
   font-family: TikalSansMedium;
   font-weight: normal;
   font-style: normal;
   font-size: 11pt;
   background-color: white;
   border: 1px solid #9F9F9F;
   border-radius: 2px;
   height: 450px;
   width: 610px;
   position: relative;
 }
 h2#fnd_cl {
   border: 1px solid #9F9F9F;
   border-radius: 2px;
   position: absolute;
   top: -33px;
   left: 30%;
   font-family: 'Antic Slab';
   background-color: #F8CE26;
   width: 230px;
   text-align: center;
 }
 div#cont {
   height: 50px;
   padding-left: 8px;
   padding-top: 35px;
   border: 1px solid black;
 }
 div#map-canvas {
   width: 610px;
   height: 300px;
   position: absolute;
   bottom: 0;
   width: 230px;
   background-color: black;
 }

<script src="https://maps.googleapis.com/maps/api/js"></script>
<br>
<div id="wrap-left">
  <h2 id="fnd_cl">Find or Call us</h2>
  <div id="cont">
    Our workshop is located on Blah-blah Street.
    <br />Call us on: 556-546-564 or 2-35-68-91
  </div>
  <div id="map-canvas"></div>
</div>