Как установить одинаковый размер заполнения

Question

У меня есть изображение на моей веб-странице, и я не понимаю, почему отступы устанавливаются только с левой стороны.Правая сторона не показывает никакого поля.

Это мой CSS:

#main {
  margin-top: 0px;
  margin-bottom: 10px;
}

#main {
  margin-top: 100px;
  margin-bottom: 100px;
}

@media (min-width: 768px) .noo-container {
  max-width: 750px;
  width: 100%;
}

.noo-container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

article,
aside,
details,
figcapti figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  font-family: "helvetica", "arial", "sans-serif";
}

Я должен иметь одинаковое поле слева и справа.

Страница https://prueba.soygorrion.com.ar/home/.

Answer 1

Если вы осмотрите элемент, то <div> с class="vc_row wpb_row vc_row-fluid vc_row-no-padding" имеет left: -88.5px;width: 1349px.Это вызывает проблему здесь. Сделайте это как left: 0;width: 100%.Затем удалите это class="site-main noo-container" из <main>, как вы упомянули max-width

<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid vc_row-no-padding" style="position: relative;/* left: -88.5px; */box-sizing: border-box;width: 100%;">

Answer 2

CSS содержит много противоречивых данных:

Обе они вызываются с использованием id="main", так что это должно быть?

#main {
  margin-top: 0px;
  margin-bottom: 10px;
}

#main {
  margin-top: 100px;
  margin-bottom: 100px;
}

Здесь вы указываете, что width: 100%; конфликтует с вашими настройками margin-right:auto; и margin-left:auto;.И ... хотя вы указали настройки для padding-left:15px / padding-right:15px, вам может быть лучше использовать padding: auto;, который фактически центрирует содержимое по всем 4 направлениям.

@media (min-width: 768px) .noo-container {
  max-width: 750px;
  width: 100%;
}

.noo-container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

Answer 3

Это вызвано использованием свойства "background-image" в div.Использовать тег значительно проще и чаще.

<div class="tp-bgimg defaultimg">
    <img src="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/05/HEAD1-1024x532.jpg">
</div>

.bgimg {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    z-index: 20;
}
.bgimg img {
    margin: 0 10px;
    width: calc(100% - 21px);
}