Richard Rodgers Richard Rodgers - 4 months ago 7x
CSS Question

percentage margin left and right not working properly

What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.

Here is my code.

@import url(,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>
<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">
<div class="content">
<div class="logo"></div>
<div class="btn"></div>

I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.

Thanks in advance !


Try changing width: 100%; to width: auto; for .content in the media query.

The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.