CODEWITHSUNDEEP
htmlcssmarginpercentage
Richard Rodgers
Richard Rodgers

Reputation: 625

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(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>

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 !

Upvotes: 3

Views: 1961

Answers (2)

OysterMaker
OysterMaker

Reputation: 319

Add the attribute box-sizing:border-box; to your content div and it will fix the problem.

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 1

Stickers
Stickers

Reputation: 78686

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.

Upvotes: 4

Related Questions