html/css中的全屏宽度标题

我知道这是一个常见的问题，但我无法获得与屏幕相同大小的标题。
我已经尝试将标题包装到另一个div中，并使

width:100%

。这没用

谢谢你的帮助

正文{
字体系列：“不规则字体”；
填充：0；
保证金：0；
背景色：#F4；
宽度：100%
}
/*全球的*/
.集装箱{
宽度：85%；
保证金：自动；
溢出：隐藏；
}
/*标题**/
标题{
背景：#16205E；
颜色：#ffffff；
填充顶部：30px；
最小高度：7.5vh；
边框底部：#2B8AFF 3px实心；
显示：表格单元格；
垂直对齐：中间对齐；
}
标题a{
颜色：#ffffff；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
头李{
浮动：左；
显示：内联；
垂直对齐：顶部；
填充：0 20px 0 20px；
}
标题#品牌{
宽度：20%；
浮动：左；
填充顶部：0px；
垫底：20px；
}
收割台#主img{
宽度：100%；
身高：100%；
}
标题导航{
浮动：对；
边缘顶部：20px；
}

您有显示：表格单元格；这意味着它就像一个小房间。。。表单元格与内容相关。您可以删除它，然后您的标题将显示：block，这意味着它将自动100%。回顾一下，我的回答不如这里的另一个好。。。所以只需删除显示：表格单元格

---

您有显示：表格单元格；这意味着它就像一个小房间。。。表单元格与内容相关。您可以删除它，然后您的标题将显示：block，这意味着它将自动100%。回顾一下，我的回答不如这里的另一个好。。。所以只需删除显示：表格单元格

只需从

标题中删除
显示：表格单元格


正文{
字体系列：“不规则字体”；
填充：0；
保证金：0；
背景色：#F4；
宽度：100%
}
/*全球的*/
.集装箱{
宽度：85%；
保证金：自动；
溢出：隐藏；
}
/*标题**/
标题{
背景：#16205E；
颜色：#ffffff；
填充顶部：30px；
最小高度：7.5vh；
边框底部：#2B8AFF 3px实心；
}
标题a{
颜色：#ffffff；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
头李{
浮动：左；
显示：内联；
垂直对齐：顶部；
填充：0 20px 0 20px；
}
标题#品牌{
宽度：20%；
浮动：左；
填充顶部：0px；
垫底：20px；
}
收割台#主img{
宽度：100%；
身高：100%；
}
标题导航{
浮动：对；
边缘顶部：20px；
}





只需从
标题中删除
显示：表格单元格


正文{
字体系列：“不规则字体”；
填充：0；
保证金：0；
背景色：#F4；
宽度：100%
}
/*全球的*/
.集装箱{
宽度：85%；
保证金：自动；
溢出：隐藏；
}
/*标题**/
标题{
背景：#16205E；
颜色：#ffffff；
填充顶部：30px；
最小高度：7.5vh；
边框底部：#2B8AFF 3px实心；
}
标题a{
颜色：#ffffff；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
头李{
浮动：左；
显示：内联；
垂直对齐：顶部；
填充：0 20px 0 20px；
}
标题#品牌{
宽度：20%；
浮动：左；
填充顶部：0px；
垫底：20px；
}
收割台#主img{
宽度：100%；
身高：100%；
}
标题导航{
浮动：对；
边缘顶部：20px；
}





我有一个很好的惯例供您遵循，我为自己设计了这个惯例，它运行得很好。看看下面

旁注：我将删除UL列表。只要直接使用链接，就可以使用CSS来设置菜单链接的样式。这会让你的生活更轻松

每个页面必须有一个包装器div来包装所有html

然后在包装器中，您可以管理您的内容。但是你的包装必须始终有100%的宽度，而且你的盒子宽度永远不会是全宽，这个名字解释了它的用途。此标准允许您控制页面的全宽内容，如横幅或页面上任何级别的任何内容。然后，如果您有类似文本内容的内容，您可以使用“框宽样式”类将内容居中

我为您留下代码的方式也将考虑到移动设备，响应性设计很重要。但您可以根据自己的感受对其进行优化。：）

为了让您的所有元素内联，请根据最适合您的功能来研究这些功能

->内联块

及

->浮动

然后对周围div中的div元素应用适当的样式

<div class="wrapper">
    <!-- Header Div -->
    <div class="header">
        <!-- Your header Content goes here -->
    </div>
    <!-- Body Div -->
    <div class="body box-width">
        <!-- Your body Content goes here -->
        <!-- This body will be box width -> 1200px -->
    </div>
    <div class="body-2">
        <!-- Your body Content goes here -->
        <!-- This body will be full width -->
    </div>
    <!-- Footer Div -->
    <div class="footer">
        <!-- Your footer Content goes here -->
    </div>
</div>

<style type="text/css">
    @media only screen and (min-width: 1024px) {
        .wrapper{
            width: 100%;
            max-width: 100%;
        }
        .box-width{
            width: 1200px;
            max-width: 100%;
            margin: 0px auto;
        }
    }
    @media only screen and (max-width: 1023px) {
        .box-width {
            max-width: 90%;
            margin: 0px auto;
        }
    }
</style>


@仅介质屏幕和（最小宽度：1024px）{
.包装纸{
宽度：100%；
最大宽度：100%；
}
.箱宽{
宽度：1200px；
最大宽度：100%；
保证金：0px自动；
}
}
@仅介质屏幕和（最大宽度：1023px）{
.箱宽{
最大宽度：90%；
保证金：0px自动；
}
}
我有一个很好的惯例供您遵循，我为自己设计了这个惯例，它运行得很好。看看下面

旁注：我将删除UL列表。只要直接使用链接，就可以使用CSS来设置菜单链接的样式。这会让你的生活更轻松

每个页面必须有一个包装器div来包装所有html

然后在包装器中，您可以管理您的内容。但是你的包装必须始终有100%的宽度，而且你的盒子宽度永远不会是全宽，这个名字解释了它的用途。此标准允许您控制页面的全宽内容，如横幅或其他内容
<div class="wrapper">
    <!-- Header Div -->
    <div class="header">
        <!-- Your header Content goes here -->
    </div>
    <!-- Body Div -->
    <div class="body box-width">
        <!-- Your body Content goes here -->
        <!-- This body will be box width -> 1200px -->
    </div>
    <div class="body-2">
        <!-- Your body Content goes here -->
        <!-- This body will be full width -->
    </div>
    <!-- Footer Div -->
    <div class="footer">
        <!-- Your footer Content goes here -->
    </div>
</div>

<style type="text/css">
    @media only screen and (min-width: 1024px) {
        .wrapper{
            width: 100%;
            max-width: 100%;
        }
        .box-width{
            width: 1200px;
            max-width: 100%;
            margin: 0px auto;
        }
    }
    @media only screen and (max-width: 1023px) {
        .box-width {
            max-width: 90%;
            margin: 0px auto;
        }
    }
</style>