Html CSS-根据内容调整容器大小，删除未使用的空间

我正在尝试从FreeCodeCamp为一个项目创建一个页面。 问题是，我需要为页面创建一个标题，出于某种原因，我的内容和它们各自的容器之间有一些很大的差距

我已经尝试过将填充设置为零，调整边距之类的东西。将行高度更改为0这样可以减少内容占用的空间，但容器几乎保持不变

我为构成内容的每个对象的背景设置了颜色，以检查它们应该填充的区域，并将其与它们周围的容器区域进行比较

代码如下：

@导入url'https://fonts.googleapis.com/css?family=Oxygen:300，400700&display=swap'； html{ } 标题{ 位置：固定； 排名：0； 左：0； 右：0； 显示器：flex； 证明内容：之间的空间； 背景颜色：灰色； 字体系列：“氧气”，无衬线； } 标题标志{ 显示：内联块； 背景色：青色； } img容器{ 显示：内联块； 垂直对齐：中间对齐； 溢出：隐藏； 宽度：30px； 高度：36px； 背景颜色：粉红色； } 收割台img{ 宽度：60px； 高度：60px； 左边距：-15px； 边缘顶部：-12px； } 标题文本{ 显示：内联块； 垂直对齐：中间对齐； 字体大小：20px； 字号：700； 背景颜色：粉红色； } 导航条{ 显示：内联块； 背景色：青色； } 导航列表{ 列表样式：无； 背景色：洋红色； } .导航项目{ 显示：内联块； 背景颜色：粉红色； 右边距：10px； } .导航项目>a{ wtext装饰：无； } .导航项目：第一个字母{ 字号：700； } 企鹅

---

将标题徽标容器设置为显示：flex，将页边空白替换为h1的填充。 对于右侧导航，将高度：100%设置为ul，显示：flex。

---

检查此代码笔：

我希望以下帮助：

用于理解页面布局和包含块。点击

要了解有关块显示的更多信息，请选中

您还可以查看CSS网格

网格与flexbox的比较

---

你可以试着增加你的宽度和高度。只是操纵它直到它适合你。否则，宽度：100%

不确定到底是什么问题。菜单项太靠右了？您的预期输出是什么？我想删除内容与其容器之间由青色指示的未使用空间。您看到的是一些元素（如h1）的默认边距，将h1的边距重置为0。为了理解为什么会发生这种情况以及如何避免这种情况，您可以阅读：forked pen@G-Cyr那么您是否告诉我，所有框都有一个默认的边距值，我可以通过将其设置为0来更改？我以前试过，但没用。我还注意到，您的解决方案和jay surya的解决方案都涉及将显示类型从内联块更改为flex。显示的块类型是强制这些边距还是类似的？这是flex box的一个很好的资源-