Html “形象不表演”；“响应性”；使用flexbox？

我对HTML/CSS非常陌生，并且已经开始尝试学习CSS flexbox布局。使用flexbox从头开始创建一个简单的站点

全屏显示时，徽标上的图像定位看起来不错。但是，当切换屏幕大小时，右侧的导航栏会响应，但左侧的徽标图像不会响应。不过，我相信我已经正确设置了它

.header-container {
 display: flex;
 width: 100%;
 height: 150px;
 align-items: center;
 justify-content: space-between;
 }


.header-container .logo .sb{
 display: flex;
 justify-content: flex-start;
 width: 60%;
 position: relative;
 left: 50px;
 padding: 20px;
 }

这里还有我的工作链接：

我到底做错了什么？对于我使用flexbox或flexbox进行的定位类型的任何提示，我们都非常感谢

移除位置

.header-container .nav-bar-container {
    display: flex;
    /*position: absolute;*/
    /*right: 100px;*/
}

移除位置

.header-container .nav-bar-container {
    display: flex;
    /*position: absolute;*/
    /*right: 100px;*/
}

---

移除

nav上的位置

&设置

徽标图像上的最大宽度：100%

---

删除

导航上的位置

&设置

徽标图像上的最大宽度：100%

---

更好的解决方案是使用介质queries@Hash这与媒体查询无关。@Terry是的，正如我所说，更好的解决方案是媒体查询，意思是如果你想让网站与任何设备兼容。更好的解决方案是使用媒体queries@Hash这与媒体查询无关。@Terry是的，正如我所说，更好的解决方案是媒体查询意味着你是否希望网站与任何设备兼容。这是正确的答案。要解释原因，这是因为使用

position:absolute

OP有效地将整个导航菜单从布局中移除，因此flexbox将看到它的宽度为零。p/s：我还建议避免使用

position:relative

给OP的徽标留下填充。为什么不改为使用

padding left

？当调整到最小值时，徽标会变小？因此，在使用flexbox定位时，请尽量避免使用位置：相对和位置：绝对代码？改为使用边距/填充命令？这是正确答案。要解释原因，这是因为使用

position:absolute

OP有效地将整个导航菜单从布局中移除，因此flexbox将看到它的宽度为零。p/s：我还建议避免使用

position:relative

给OP的徽标留下填充。为什么不改为使用

padding left

？当调整到最小值时，徽标会变小？因此，在使用flexbox定位时，请尽量避免使用位置：相对和位置：绝对代码？改为使用边距/填充命令？@media的确切含义是什么？不过看起来很棒！欣赏它@媒体到底是什么意思？不过看起来很棒！感激