左右边距百分比无法正常工作

Question

我想要在移动设备上实现的目标是我希望我的页眉左侧有 3% 的边距，右侧有 3% 的边距。我想你可以说我所做的工作有效，但它创建了一个侧滚动条。

这是我的代码。 \

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

header {
    width: 100%;
    height: 64px;
    background-color: #ECEFF1;
}

.content {
    height: auto;
    margin: auto;
    width: 1100px;
    overflow: hidden;
}

.logo {
    float: left;
    width: 150px;
    height: 40px;
    margin-top: 12px;
    border-radius: 4px;
    background-color: white;
}

.btn {
    float: right;
    width: 160px;
    height: 40px;
    margin-top: 12px;
    border-radius: 4px;
    background-color: #4285f4;
}

@media only screen and (max-width:1110px) {
    .header {
        width: 100%;
    }
    
    .content {
        width: 100%;
        margin-left: 3%;
        margin-right: 3%;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div class="content">
            <div class="logo"></div>
            <div class="btn"></div>
        </div>
    </header>
</body>
</html>

我处理这个问题已经有一段时间了，似乎无法弄清楚为什么会有滚动条。我确定它很小，我只是忽略了它。

提前致谢！

Answer 1

尝试将媒体查询中的 .content 的 width: 100%; 更改为 width: auto;。

原因是 100% + 3% + 3% > 100% 总宽度，而 auto 将自动计算可用 space。

Answer 2

将属性 box-sizing:border-box; 添加到您的内容 div 即可解决问题。

box-sizing 属性用于告诉浏览器尺寸属性（宽度和高度）应该包括什么。

Link 到 w3 框尺寸解释：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

左右边距百分比无法正常工作

percentage margin left and right not working properly

html

css

margin

percentage