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

Question

Here's a JSFiddle.
那有一个简单的<div>。在里面，还有2个<divs>和一个<h2>。这很简单。我有较低 <div> 的宽度——Google Maps 一个（尽管它在 JSFiddle 中不起作用）——与其父级的宽度完全相同<div>。它曾经完美地工作。我真的不记得什么时候了，但我确定在添加我的 <h2> 和一些修改（也许？）之前，它已经达到了预期的宽度。
现在，它停留在那个愚蠢的宽度——尽管 Maps 仍然有效——无论我做什么。

我尝试删除 <h1> 标记以查看是否是问题所在，但没有解决任何问题。我还尝试了许多其他方法，但我就是无法将 <div> return 调整到正确的宽度。

如果你想在这里而不是在 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>

Answer 1

从 div#map-canvas

中删除 width:230px;

您在 CSS 的这个块中声明了两次宽度，这导致了您的问题。

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

DIV width illogically stuck and unable to change

html

javascript

css

position