Alejandro Esquino Alejandro Esquino - 6 months ago 12
CSS Question

White space on the sides (html/css)

I have the body & html margins and paddings set to 0. However, (I am on a macbook pro) whenever I drag the page to the right or left a white space appears (or whatever color I have the body/html background set to. An additional issue is that when I let go the left side of the screed centers itself hiding the extra part of the body/html that was showing but it continues to show on the right side. It does not show immediately when you open the web page. I hope that is detailed enough. Thank you for any help!

Here is the HTML and CSS below:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ESQ_Main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>ESQ BUILDS:HOME</title>
</head>
<body>
<div class="menu">
<div class="row">
<div class = "col-md-2">
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Home</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">About</a>
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Services</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">Conact Us</a>
</div>
<div class="col-md-2">
</div>
</div>

</div>

<div class="header">
<div class="container">

<h1>
ESQ Builds
</h1>
<h4>
A boutique construction company.
</h4>
</div>
</div>
<div class="label">
<h2>
Overview
</h2>
<p>
Our company is dedicated to ...
</p>
</div>
<div class="services">
<div class="row">
<div class="col-md-4 col-xs-6">
<h2>
Build.
</h2>
<p>
We have years of experience transforming ideas and creativity in to homes for a lifetime. We will work with you to make your dream a reality.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6">
<h2>
Tour.
</h2>
<p>
Come view our current projects in person. We offer lovely townhomes and a brand new neighborhood.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6">
<h2>
Partner.
</h2>
<p>
We work with companies to construct the facilities they need to acheive their goals.
</p>
<div class="row">
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Learn More</a>
</div>
<div class="col-md-6 col-xs-9">
<a class="btn" href="https://www.google.com/">Projects</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<h5>
ESQ Builds
</h5>
<p>
Website/ Design by Alejandro Esquino
</p>
</div>
</body>
</html>

html,body{
margin:0;
background-color:gray;
}
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:gray;
text-align:center;
margin-bottom:0px;
}
.menu .row{
padding-top:10px;

}

.menu .btn{
color:white;
font-size:20px;
}

/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
background-size:cover;

margin-top:0px;
}
.header

/*LABEL*/
.label{

}

/*Services*/
.services{

}

/*FOOTER*/
.footer{

}

/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{

}
.btn:active{

}
.btn:visited{

}

Answer

Your .menu and .services sections are missing a .container wrapping element for the .row you're using.

It seems as though you're using bootstrap grid without wrapping these .row element in .container. So the negative margins you have on the .row, of margin-right: -15px; and margin-left: -15px; is causing your .row to extend beyond it's width. Have a look at https://getbootstrap.com/css/#grid for the grid markup documentation, and note:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The .container element has a padding-left: 15px and padding-right: 15px which offsets the .row's negative margin.

Comments