Html 如何在响应性网站中对齐同一行上的徽标和标题

我正在尝试将标题和徽标对齐到同一行。
在台式机和笔记本电脑上看起来很棒，但在手机上，徽标与标题重叠，你看不清所有文字

下面是我的代码

。页眉{
利润率：10px0；
填充：10px0；
宽度：100%；
高度：224px；
显示：块；
位置：相对位置；
}
.页眉#标题{
文本对齐：左对齐；
字体大小：40px；
浮动：左；
}
.页眉#徽标{
高度：60px；
宽度：100px；
浮动：对；
右：0；
底部：0；
位置：绝对位置；
}

切换导航
观鸟

如果不希望重叠，则不应使用绝对定位。此外，您还可以使用hereflexbox方法，这样您就可以在这里删除浮动，并在HTML中以更自然的顺序移动元素。演示：

标题。导航栏标题{
/*成为一个灵活的容器*/
/*其直接子项将是弹性项*/
显示器：flex；
/*由于默认引导样式，正在执行一些规格化*/
宽度：100%；
边距：0！重要；
填充：0 15px；
}
.导航栏标题>a{
/*向右移动*/
左边距：自动；
}
.navbar标题>按钮{
左边距：5px；
}
.页眉{
利润率：10px0；
填充：10px0；
宽度：100%；
高度：224px；
显示：块；
}
.页眉#标题{
文本对齐：左对齐；
字体大小：40px；
}
.页眉#徽标{
高度：60px；
宽度：100px；
}

观鸟
切换导航

如果不希望重叠，则不应使用绝对定位。此外，您还可以使用hereflexbox方法，这样您就可以在这里删除浮动，并在HTML中以更自然的顺序移动元素。演示：

标题。导航栏标题{
/*成为一个灵活的容器*/
/*其直接子项将是弹性项*/
显示器：flex；
/*由于默认引导样式，正在执行一些规格化*/
宽度：100%；
边距：0！重要；
填充：0 15px；
}
.导航栏标题>a{
/*向右移动*/
左边距：自动；
}
.navbar标题>按钮{
左边距：5px；
}
.页眉{
利润率：10px0；
填充：10px0；
宽度：100%；
高度：224px；
显示：块；
}
.页眉#标题{
文本对齐：左对齐；
字体大小：40px；
}
.页眉#徽标{
高度：60px；
宽度：100px；
}

观鸟
切换导航

我复制了您编写的代码并粘贴了它，但它不像您的代码那样完美，按钮显示在页眉宽度之外。@EvaristusIhezurumba您确定复制了相同的HTML和CSS吗？@VadimOvchinikov复制了HTML和CSS。它看起来很棒，但在移动设备上，切换按钮超出了页眉宽度。我需要做些什么才能让它看起来很好，而且反应灵敏吗mobile@EvaristusIhezurumba这取决于屏幕宽度。如果屏幕宽度非常小，您可以应用，并且儿童不可能适合容器，那么您需要应用一些额外的样式（去除填充物、减小字体大小等）通过媒体查询小屏幕。@VadimOvchinikov请帮助我编写代码实际上我只是一个初学者我复制了你编写的代码并粘贴了它，但它不像你的代码那样完美，按钮显示在页眉宽度之外。@EvaristusIhezurumba您确定复制了相同的HTML和CSS吗？@VadimOvchinikov复制了HTML和CSS。看起来不错，但在手机上，切换按钮超出了页眉宽度。我需要做些什么才能让它看起来很好，而且反应灵敏吗mobile@EvaristusIhezurumba这取决于屏幕宽度。如果屏幕宽度非常小，您可以应用，并且儿童不可能适合容器，那么您需要通过媒体查询为这些小屏幕应用一些额外的样式（删除填充、减小字体大小等）。@VadimOvchinikov请帮助我编写代码，实际上我只是一个初学者