responsive text wrap align

When text wraps the foreground solid div no longer aligns with the background transparent div

HTML

<div id="divboxtable">
  <div id="divboxcell">
    <div id="divbox">
      <div class="divtxtbck">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
      <div class="divtxtfor">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
    </div>
  </div>
</div>

CSS

#divboxtable {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
  background-image: url("https://www.climatebonds.net/files/images/Water%20(4).jpg");
}

#divboxcell {
  display: table-cell;
}

#divbox {
  display: inline-block;
  zoom: 1;
  position: relative;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.divtxtbck {
  background-color: white;
  padding: 0 10px 0 10px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  filter: alpha(opacity=60);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.6;
}

.divtxtbck h1 {
  //  visibility: hidden;
  color: red;
}

.divtxtfor {
  position: absolute;
  top: 0;
  left: 10px;
}