Html 导航栏上的填充使其从页面溢出，带有边距/填充的内部容器不'；也不行

所以我正在从头开始创建一个新网站，我已经被困在导航栏上了。我有一个简单的HTML：

<div class="navbar">
  <div class="page-title">SkillUp</div>
</div>

<div class="container">

  <!-- PAGE CONTENT INJECTED HERE -->
  <div ng-view></div>

</div>

简单。但是，当添加填充时，导航栏将水平延伸到页面上方，长度为填充的2倍。我尝试了各种方法，从将主体和html宽度设置为100%，到在导航栏中放置另一个div，将其宽度设置为100%，并添加填充，但这也会使外部导航栏变大！只有当我从导航栏中删除填充时，它才起作用，但我制作的其他网站没有这个问题！我不想把它的内部元素的工作

下面是发生的情况的图片：

救命啊！谢谢

添加

box-sizing: border-box;

到.navbar选择器。

添加

box-sizing: border-box;

---

到.navbar选择器。

不知道这个把戏。我会将flexbox嵌套在一个全宽容器中。。。美好的one@GolezTrol没有人，用你的解决方案，标题不会占据所有的空间…我爱你。但这可能会在旧浏览器中引起问题吗？我不知道这个把戏。我会将flexbox嵌套在一个全宽容器中。。。美好的one@GolezTrol没有人，用你的解决方案，标题不会占据所有的空间…我爱你。但是，这可能会导致旧浏览器出现问题吗？请尝试删除

width:100%

，改用

top:0；左：0；右图：0

因此导航栏将扩展到100%@这也行！所以你们认为这样做更好吗，还是盒子大小：边框盒子；？在兼容性或其他方面。我相信没有区别，盒子大小是完全兼容的，请选中它尝试删除

width:100%

并使用

top:0；左：0；右图：0

因此导航栏将扩展到100%@这也行！所以你们认为这样做更好吗，还是盒子大小：边框盒子；？在兼容性或其他方面。我相信没有区别，盒子大小是完全兼容的，请检查它