计算两个元素的宽度和两者之间的空间，并使标题具有相同的宽度

Question

我的网站上有文字/图片部分，容器只能防止内容触及移动设备的两侧，因此网站可以跨越全宽。在设置如下的某些页面上 - https://jsfiddle.net/EikHunter/za3p3vm3/

<header class="hd-Header">
  <div class="hd-Header_Inner">
    <div class="hd-Header_Body">
      <div class="hd-Header_Left">
        <div class="hd-Header_LogoContainer">
          <div class="hd-Header_Logo">
          </div>
        </div>
      </div>
      <div class="hd-Header_Right">
        <div class="nav-Navigation">
          <ul class="nav-Navigation_Items">
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 1</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 2</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 3</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 4</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 5</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<section class="sec-Section">
  <div class="sec-Section_Inner">
    <div class="sec-Section_Columns">
      <div class="sec-Section_Column sec-Section_Column-content">
        <div class="sec-Section_Content">
          <h1 class="sec-Section_Title">Lorem ipsum dolor sit amet.</h1>
          <p class="sec-Section_Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, voluptate.</p>
        </div>
      </div>
      <div class="sec-Section_Column">
        <div class="sec-Section_ImageContainer">
          <div class="sec-Section_Image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我需要计算两个文本元素之间的距离，包括空格，以便我可以使标题的宽度与文本区域的宽度相同，因此文本区域保持居中。