Html Div未延伸到父级的宽度

我有一个导航栏，我想定位在视口的顶部。我有我的导航包装由一个标题容器封装，由我的主包装封装

出于我不理解的原因，我的头容器的行为不符合预期。如果我将其宽度设置为100%，它将远远超出右侧的主包装。然后，我删除了“width:100%”，因为我读到了几个默认情况下用div来填充其父对象宽度的地方。当我删除宽度：100%时，标题容器收缩到比主包装小一些的大小

你有没有想过这里会有什么问题？下面是代码，后面是一个JSFIDLE：

HTML
<div class="main-wrap">
  <div class="headercontainer">
    <div class="nav-wrap">
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">about</a></li>
            <li><a href="">news</a></li>
            <li><a href="">blog</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </div> <!-- end nav-wrap-->
</div> <!-- end headercontainer -->

<div>
    <font size="6em">
    <br><br>
    this is the main wrapper with filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    </font>
</div>

---

相对于元素包含块的宽度，解析

宽度中的百分比

通常，该包含块是最近的块祖先，可能是父块

但是，对于固定定位的图元，包含的块是视口。（*）

因此，
width:100%
使其与视口一样宽

（*）也有一些例外，比如转化的祖先。但如果使用该选项，则在滚动文档时，元素将不再固定。
关于定位：

固定定位类似于绝对定位，但元素的包含块是视口

因此，父块不是div.main-wrap，而是UA的视口，这是计算100%的基础。
您可以尝试

位置：粘性

因此，你解决了家长的宽度问题，你的导航将坚持在页面的顶部；不完全是你想要的，但它可能适合你。
试试这个

只需在您的
CSS

.headercontainer {
    background-color: #990033;
    box-sizing: border-box;
    display: block;
    margin-bottom: 25px;
    margin-top: 0;
    max-width: 1200px;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 70%;
    z-index: 100;
}

position:sticky
主要不受大多数浏览器支持。感谢您提供的有用信息！因此，接下来的问题是：1）为什么当宽度设置为100%时，div在父对象的左侧对齐，但仅在右侧延伸到视口？2） 为什么，当我完全不考虑宽度时，它只延伸到父对象的80%左右？最后3）我如何才能实现让这个粘性导航条填充主包装宽度的目标？您可以查看上面的JSFIDLE来了解我在说什么。谢谢！1） 因为您既没有设置
left
属性，也没有设置
right
属性。因此，其左侧被定位在其静态位置，即，如果不固定，其将具有的位置。2） 因为您没有设置
宽度
或
左侧
和
右侧
。然后，使用该参数计算宽度。80%是偶然的，这取决于内容。3） 我会使用sticky positioning（），但并非所有浏览器都支持它。
.headercontainer {
    background-color: #990033;
    box-sizing: border-box;
    display: block;
    margin-bottom: 25px;
    margin-top: 0;
    max-width: 1200px;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 70%;
    z-index: 100;
}