Html 在移动设备上安装包装器表

我如何更正此处的代码，以便当用户在移动设备上打开时，它会打开页面的100%，并且文本在两侧（即包裹标题和票据标题下）左对齐

之所以按原样布置，是因为每个相邻选项之间存在直接关联，即套餐-便利与门票-不便相邻

.包装纸{
宽度：100%；
利润率：2%自动；
}
.hgrp{
宽度：90%；
文本对齐：居中；
背景：rgba（11,77,122,0.7）；
边框右上角半径：10px；
边框左上半径：10px；
颜色：#fff；
}
.hgrp h2{
宽度：45%；
浮动：左；
字体大小：16px；
}
.hgrp h3{
宽度：10%；
浮动：左；
字体大小：10px；
}
.hgrp：：之后{
内容：“；
明确：两者皆有；
显示：块；
}
保险商实验室{
填充：0；
}
李{
显示：内联块；
}
李斯潘：之后呢{
内容：“；
显示：块；
利润率：10px自动；
边框顶部：2个虚线#fff；
宽度：300px；
}
李：最后一个孩子span：：之后{
显示：无；
}
赞成，反对{
浮动：左；
宽度：45%；
填充：20px0；
文本对齐：居中；
}
专业人士{
背景：rgba（0,128,0,0.7）；
颜色：rgba（255，255，255，0.9）；
文本阴影：1px1px50pxRGBA（0,0,0,0.3）；
边框左下半径：10px；
字体大小：10px；
}
.犯人{
背景：rgba（255,0,0,0.7）；
颜色：rgba（255，255，255，0.9）；
文本阴影：1px1px50pxRGBA（0,0,0,0.3）；
边框右下半径：10px；
字体大小：10px；
}
@媒体屏幕和屏幕（最大宽度：414px）{
.包装纸{
宽度：280px；
}
}
表赞成和反对-平面
包裹
VS
售票处

全包公司酒店


包括所有WWE活动


大多数包装的纪念椅


我们提供选择


方便


易用性


放心吧，一切都办妥了



一次付清所有的打包费


单笔交易购买


在一次交易中压力较小的购买


只有一天的压力，所有WWE
事件都会在那里排序，然后


打开包裹的兴奋



我们为你做计划


我们提供这个包


自定义WWE的首选项



无论您的预算如何，我们都会提供选择



酒店没有灵活性


酒店的成本远远高于市场价值


更贵（取决于优惠）



我们提供费用


你预先知道成本


包装价格过高！而且不要把你整个假期的花费都包括在内


不必使用Ticketmaster



我们在这里不要插手



包装用Ruch（一次性）


所有WWE活动的保证票


晚些时候才收到票


所有门票同日发售


不费时


没有得不到活动门票的风险


不需要经销商



WWE接受所有全局位置



没有座位的灵活性


如果你有最高级的套餐，座位会更好


别选你的座位


保证好座位


有更好的机会坐在前排


座位可能无法反映您所付的价格



您必须遵守WWE的日程安排



不管怎样，你都将为所有活动付费


我们为你选座位




每样东西都要单独购买


单独购买WWE门票


只有顶级票的椅子


更多选择


不便之处


Ticketmaster可能无法使用


不断思考门票什么时候开始销售，如果是


只在门票出售时付款


每个事件有多个事务


单独购买压力更大


多天和前几天的压力



你马上就收到票，知道你的座位了


你自己做计划和工作


您可以创建自己的包


考虑到所有因素后，您可以根据自己的喜好进行更多定制


您可以根据个人喜好和预算定制您的体验



选择你想要的酒店


如果你仔细看的话，你可以便宜地订旅馆


整体成本更低，全部独立完成（取决于偏好）


你可以分摊成本和预算


可能超出预算


票价是可以承受的



售票员把你拒之门外


如果不够快，可能无法以合理的价格获得所有非狂热活动的门票


抢票（多次）


可能会卖完


直接买票


多个销售日期和预售


费时


错过门票的风险（售罄等）


可能需要使用转售商，即Stubhub或同等产品


因为在美国境外购买，所以第一次购票不一定能买到票


灵活选择自己的座位


选择不同的票证级别（更好或更差）


选择自己的座位区


你可能根本找不到座位


更难达到地板水平


更好的座位选择选项