Display Flex布局问题：父级生效但子元素h1不生效

复刻网站时，主菜单通过position:fixed固定在页面顶部，.menu-right容器的flex布局正常，但红色方块（.delivery-square）内的h1#delivery-t设置display:flex后未产生预期效果。元素检查显示样式已应用，但布局无变化，尝试将方块与h1合并为单个div也未解决问题。

问题分析与解决方法 #

1. 默认样式干扰：浏览器对<h1>标签有默认的上下外边距，会抵消flex布局的对齐效果；同时#delivery-t的font-weight:700px是错误写法（font-weight应使用数值或关键字，不能加px单位）。
2. flex继承逻辑混乱：使用display:inherit和justify-content:inherit会继承父级属性，导致你给h1设置的justify-content:flex-end被父级的center覆盖，无法生效。
3. 简化flex布局逻辑：让.delivery-square直接作为flex容器，控制内部h1的对齐，无需给h1本身设置flex属性。

修改后的关键CSS代码 #

.menu{
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    background: #131315;
    position: fixed;
    top: 0;
    z-index: 98;
} 
.menu-right{
    margin: 0;
    padding: 0;
    display:flex;
    justify-content: center;
    align-items: center; /* 新增：让子元素垂直居中 */
    width: 100%;
    height: 50px;
    background-color: black;
}

.delivery-square{
    width: 156px;
    height: 48px;
    background: #f53b34;
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    border-radius: 10px;
    margin-right: 28px;
    display:flex; /* 直接设置flex容器，替代inherit */
    justify-content: flex-end; /* 直接指定内容右对齐 */
    align-items: center; /* 让文字垂直居中 */
}

#delivery-t{
    margin: 0; /* 清除h1默认外边距 */
    margin-right: 28px;
    font-size: 18px;
    font-weight: 700; /* 修正错误：去掉多余的px单位 */
    color: #fff;
    letter-spacing: 0;
}

#contact-t {
    color: red;
    margin: 0; /* 清除h1默认外边距 */
}

.food-menu{
    margin-top: 120px; /* 替换绝对定位，避免被固定菜单遮挡 */
}

核心修改说明 #

• 给.menu-right添加align-items:center，确保内部元素垂直居中
• 将.delivery-square改为显式的flex容器，直接控制内部内容的对齐方式
• 清除h1标签的默认外边距，修正font-weight的错误写法
• 调整.food-menu的定位方式，避免被顶部固定菜单遮挡

内容的提问来源于stack exchange，提问作者M.K