Html 拉伸水平div（中间div拉伸）

我想创建一个与页面宽度匹配的标题

我的头由三部分组成，两边固定宽度，中间伸展

<div class="bigBlueBox">
   <div class="headerBox">
       <div class="leftSide"></div>
       <div class="middleSide"></div>
       <div class="rightSide"></div>
   </div>
</div>

我的问题是，正如你在这里看到的，有一个空白我无法消除（红色边框不在蓝色框的周围）

如何删除此“边距”

---

否则，有没有其他不使用方框的方法呢？

解决方案非常简单，我只需在中间的div中添加一些内容：

<div class="bigBlueBox">
    <div class="headerBox">
        <div class="leftSide"></div>
        <div class="middleSide"> SOMETHING  </div>
        <div class="rightSide"></div>
    </div>
</div>

某物

也可以是

<div class="bigBlueBox">
    <div class="headerBox">
        <div class="leftSide"></div>
        <div class="middleSide"> SOMETHING  </div>
        <div class="rightSide"></div>
    </div>
</div>