Javascript 移动模式下的文本未自我修复

我有文字不想填补整个页面，但只有它的一半。我试过两种方法<代码>宽度：100%但两者都不起作用。有什么建议吗

我正在Chrome仿真上用iPhone4测试这一点。我必须输入更多的非代码字符，因为堆栈溢出的奇怪的小错误，所以我希望大家都过得愉快

*{
保证金：0；
填充：0；
颜色：白色；
}
html，正文
{
身高：100%；
溢出x：隐藏；
背景色：黑色；
}
#容器
{
最小高度：100%；
背景色：黑色；
}
#横幅
{
宽度：100%；
高度：200px；
背景图片：url（images/banner.jpg）；
背景重复：重复；
}
#内容
{
宽度：100%；
高度：自动；
溢出x：隐藏；
溢出y：自动；
填充底部：240px；
背景色：黑色；
利润率：10px；
}
#页脚
{
背景色：#333；
位置：相对位置；
高度：240px；
边缘顶部：-240px；
明确：两者皆有；
}
/*条件句*/
/*横幅*/
.横幅文本
{
文本对齐：居中；
字体大小：72px；
字体系列：“Handlee”，草书；
填充顶部：50px；
}
/*航行*/
/*内容*/
梅斯特鲁夫先生
{
左边距：100px；
}
.mainstuff2
{
右边距：100px；
}
.maintext
{
边缘顶部：30px；
右边距：150px；
字体系列：“Farsan”，草书；
字体大小：30px；
}
.maintext2
{
边缘顶部：30px；
左边距：150像素；
字体系列：“Farsan”，草书；
字体大小：30px；
}
目录
{
边缘底部：25px；
边缘顶部：25px；
}
/*联系我们网页*/
.btn
{
背景颜色：灰色；
}
仅有一个的
{
宽度：60%；
}
.多
{
宽度：60%；
高度：100px；
}
/*页脚*/
引用
{
高度：150像素；
边缘顶部：10px；
}
.引用h1
{
文本对齐：居中；
字体大小：35px；
}
社会的
{
高度：150像素；
边缘顶部：10px；
}
.社会福利
{
字体大小：35px；
文本对齐：居中；
}
.社会img
{
宽度：30px；
高度：30px；
}
社交
{
填充顶部：30px；
}
.底部导航
{
高度：150像素；
边缘顶部：10px；
文本对齐：居中；
}
.底部导航h3
{
字体大小：20px；
}
.底部导航a
{
颜色：白色；
文字装饰：无；
}
.版权所有h1
{
文本对齐：居中；
字体大小：20px；
填充顶部：50px；
}
/*媒体查询*/
@媒体屏幕和屏幕（最大宽度：360px）
{
/*横幅*/
.横幅文本
{
文本对齐：居中；
字体大小：50px；
字体系列：“Handlee”，草书；
填充顶部：70px；
}
/*航行*/
/*内容*/
梅斯特鲁夫先生
{
宽度：100%；
保证金：0；
}
.mainstuff2
{
宽度：100%；
}
.maintext
{
边缘顶部：30px；
字体系列：“Farsan”，草书；
字体大小：20px；
明确：两者皆有；
}
.maintext2
{
边缘顶部：30px；
字体系列：“Farsan”，草书；
字体大小：20px；
明确：两者皆有；
}
目录
{
边缘底部：25px；
边缘顶部：25px；
}
/*联系我们网页*/
.btn
{
背景颜色：灰色；
}
仅有一个的
{
宽度：60%；
}
.多
{
宽度：60%；
高度：100px；
}
/*页脚*/
引用
{
高度：150像素；
边缘顶部：10px；
}
.引用h1
{
文本对齐：居中；
字体大小：35px；
}
社会的
{
高度：150像素；
边缘顶部：10px；
}
.社会福利
{
字体大小：35px；
文本对齐：居中；
}
.社会img
{
宽度：30px；
高度：30px；
}
社交
{
填充顶部：30px；
}
.底部导航
{
高度：150像素；
边缘顶部：10px；
文本对齐：居中；
}
.底部导航h3
{
字体大小：20px；
}
.底部导航a
{
颜色：白色；
文字装饰：无；
}
.版权所有h1
{
文本对齐：居中；
字体大小：20px；
填充顶部：50px；
}
}
/*#################################
###################################
###################################
#################################*/
/*普通智能手机*/
@媒体屏幕和（最小宽度：360px）和（最大宽度：480px）
{
}
/*#################################
###################################
###################################
#################################*/
/*更大的电话*/
@介质屏幕和（最小宽度：480px）和（最大宽度：767px）
{
}
/*#################################
###################################
###################################
#################################*/
/*普通药片*/
@媒体屏幕和（最小宽度：767px）和（最大宽度：1023px）
{
/*#############*/
/*航行*/
.导航链路
{
字体大小：1.18rem；
}
/*#############*/
/*主页*/
#主页
{
保证金：10em0；
}
.homepageQuote
{
颜色：白色；
字体大小：5rem；
}
.homepageQuote强
{
颜色：浅绿色；
}
.btn页边距按钮
{
边缘顶部：2.5em；
宽度：15em；
高度：3em；
背景颜色：灰色；
}
.btn保证金a
{
颜色：白色；
字体大小：3rem；
}
/*#############*/
/*约页*/
#约页
{
保证金：15雷姆0 22雷姆；
}
.大约h1
{
字体大小：2.7rem；
颜色：白色；
宽度：90%；
保证金：0自动；
}
.关于strong
{
颜色：浅绿色；
}
.关于img
{
身高：70%；
宽度：95%；
边缘顶部：5雷姆；
保证金权利：15 REM；
}
/*#############*/
/*服务费*/
#服务费
{
保证金：4REM0；
}
.servicesh1 h1
{
颜色：白色；
字号：4rem；
}
.服务行
{
保证金：0.8雷姆0；
}
.服务h1
{
颜色：白色；
字体大小：2.3rem；
}
.p.服务
{
颜色：白色；
字体大小：1.5rem；
}
进步
{
高度：2em；
字体大小：1.5rem；
}
网状物
{
利润上限：23px；
}
.社会福利
{
字体大小：2.2米；
利润上限：4倍；
}
.搜索引擎优化
{
边缘顶端：13px；
}
设计
{
边缘底部：86px；
}
.分析
{
保证金底部：