移动端布局问题：HTML右侧冗余边距、容器边距缺失及图标异常

一、修复移动端右侧额外边距与容器边距缺失问题 #

问题根源在于移动端媒体查询中给所有元素设置了margin: 1rem，导致根元素产生横向外边距触发滚动条；同时容器未保留合适内边距，内容贴边。修改方案：

1. 删除媒体查询内的全局* { margin: 1rem; }规则，避免全局外边距污染
2. 给移动端.container添加自适应宽度与居中外边距，保证页面留白
3. 调整.info内边距，避免内容紧贴容器边缘
4. 全局添加box-sizing: border-box，统一元素宽度计算逻辑

修改后的核心CSS：

*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: hsl(228, 12%, 48%);
    box-sizing: border-box; /* 统一盒模型 */
}
body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem; /* 全局留白，避免小屏内容贴边 */
}
.container{
    max-width: 37rem;
    display: flex;
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden; /* 处理圆角溢出 */
}

@media(max-width : 375px){
    .container{
        display: block;
        max-width: 100%;
    }
    img{
        width: 100%;
        max-width: none;
    }
    .info{
        padding: 1.5rem;
    }
}

二、修复Font Awesome图标显示方块问题 #

图标显示方块通常是字体未正确加载或类名/权重不匹配，解决方案：

1. 给图标添加明确的字体样式，确保Font Awesome字体生效：

button i {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* solid风格图标权重为900 */
    margin-right: .5rem;
    color: #fff;
}

2. 同步修改HTML中的图标类为solid风格（更适配电商场景）：

<button><i class="fa-solid fa-cart-shopping"></i> Add To Cart</button>

完整修改后代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
   <div class="container">
    <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfume">
    <div class="info">
        <span class="type">Perfume</span>
        <h1 class="title">Gabrielle Essence Eau De Parfume</h1>
        <p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
        <div class="prices">
            <span class="newprice">$149.99</span>
            <span class="oldprice">$169.99</span>
        </div>
        <button><i class="fa-solid fa-cart-shopping"></i> Add To Cart</button>
    </div>
   </div> 
</body>
</html>

CSS #

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: hsl(228, 12%, 48%);
    box-sizing: border-box;
}
html{
    margin: 0;
}
body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}
.container{
    max-width: 37rem;
    display: flex;
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden;
}
img{
    max-width: 18.5rem;
    height: auto;
}

.title{
    font-family: 'Fraunces', serif;
    color: black;
    margin: .8rem 0 1rem;
}
.info{
    padding: 1.9rem;  
}
p{
    font-size: 14px;
    line-height: 1.5rem;
}
.prices{
    margin: 1.5rem 0 1.3rem;
    display: flex;
    align-items: center;
}
.newprice{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: #658354;
    font-size: 2rem;
}
.oldprice{
    text-decoration:line-through;
    font-size: .7rem;
    margin-left: 1rem;
}
button{
    color: #fff;
    background-color: #658354;
    width: 100%;
    padding: .7rem;
    font-size: .8rem;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
button i {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: .5rem;
    color: #fff;
}
button:active{
    background-color: #2f4125;
}
@media(max-width : 375px){
    .container{
        display: block;
        max-width: 100%;
    }
    img{
        width: 100%;
        max-width: none;
    }
    .info{
        padding: 1.5rem;
    }
}

内容的提问来源于stack exchange，提问作者wannabedev