网页HTML头部代码调试求助：Flex布局等方案无效

问题诊断 #

你的代码存在两个关键问题：

• HTML结构错误：p标签嵌套（<p>...<p>...</p></p>）会导致浏览器自动修正DOM，破坏布局逻辑；同时存在多余的闭合</div>标签。
• Flex布局应用错误：你给.image-logo加了flex，但这个容器只包含图片，无法实现文字和logo的并排布局，应该给它们的父容器设置flex。

修复方案 #

1. 修正HTML结构

清理嵌套的p标签，正确闭合所有元素，让文本容器和logo容器成为同级元素，放在.header下：

<div class="header">
  <div class="motto-text">
    <p>&emsp; Idrk what to put here</p>
    <p>&emsp; &emsp; And Cooler stuff</p>
  </div>
  <div class="image-logo">
    <img src="Cream-Logo.png" height="150px" width="150px" alt="Website Logo">
  </div>
</div>

2. 调整CSS实现Flex布局

给.header设置display: flex，让内部元素横向排列，同时添加垂直居中对齐和空间分配规则：

body {
  margin: 0px;
  background: #ededed;
}

.header {
  background: #eccbacff;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100vw;
  /* 核心Flex设置 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 文字左、logo右，中间留白 */
  padding: 0 20px; /* 左右内边距，避免内容贴边 */
  box-sizing: border-box; /* 让padding包含在width内，防止溢出 */
}

.motto-text {
  font-family: 'Caveat';
  font-size: 30px;
  color: #ededed;
}

p {
  margin: 0;
}

.image-logo {
  /* 移除不必要的flex设置，图片直接显示即可 */
}

额外说明 #

• 如果需要文字和logo之间的间距更灵活，可以调整.header的justify-content属性（比如用flex-start配合margin-left:auto控制logo位置）
• 用box-sizing: border-box可以避免width:100vw加padding导致的横向滚动条问题

内容的提问来源于stack exchange，提问作者DeltaVisSick