Пустое пространство по бокам (html/css)

У меня есть поля body & html и отступы, равные 0. Однако (когда я работаю в MacBook Pro), когда я перетаскиваю страницу вправо или влево, появляется пробел (или любой другой цвет, для которого фон body / html установлен на Еще одна проблема заключается в том, что когда я отпускаю левую сторону стяжек, она сама скрывает лишнюю часть тела / html, которая показывается, но продолжает показываться с правой стороны. Она не отображается сразу при открытии веб-страницы. страница. Надеюсь, что это достаточно подробно. Спасибо за любую помощь!

здесь jsfiddle: https://jsfiddle.net/y4nww4d1/

Вот HTML и CSS ниже:

    <!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{

}
Источник

1 ответ

Решение

Ваш .menu а также .services разделы отсутствуют .container оберточный элемент для .row вы используете

Кажется, что вы используете загрузочную сетку без упаковки этих .row элемент в .container, Таким образом, отрицательные поля у вас на .rowиз margin-right: -15px; а также margin-left: -15px; вызывает ваш .row простираться за его ширину. Посмотрите на https://getbootstrap.com/css/ документацию по разметке сетки и обратите внимание:

Строки должны быть помещены в.container (фиксированная ширина) или.container-liquid (полная ширина) для правильного выравнивания и заполнения.

.container элемент имеет padding-left: 15px а также padding-right: 15px который смещает .rowОтрицательная маржа.

Источник
Другие вопросы по тегам