html - 带有媒体查询的水平滚动条问题

我正在研究媒体查询，并开始为移动屏幕进行开发。我的首页相对来说是我想要的，但是当我将屏幕尺寸调整为
该站点是：http://brad.sebdengroup.com/newOdynSite/index.php

要重新创建错误，请打开网站，将窗口调整为

最佳答案

这是问题所在：

#main span.bold {
    padding: 15px 20px;
    ...
}
#main span{
    width: 100%;
    ...
}

CSS规则的这种组合创建的元素大于页面的宽度。宽度100％不包括填充，边框或边距使用的任何空间。例如，如果页面宽度为480px，则元素的宽度将为20px + 480px + 20px = 520px。

为避免这种情况，请尝试将内容包装在其他标签中，以便可以将宽度和填充应用于单独的元素，并根据需要调整CSS。例如：

<span><strong>What have we done?</strong></span>

关于html - 带有媒体查询的水平滚动条问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11860850/