Почему у моего баннера и панели навигации немного разные длины, когда я установил для них ширину 100%?

Question

Я работаю над личным проектом, который меня очень впечатлил, когда я заметил, что моя bootstrap 4 навигационная панель и мой баннер имеют немного разную длину и что есть небольшая горизонтальная прокрутка. Я не уверен, почему, потому что мой баннер имеет скрытое переполнение, и я должен был использовать% для любых свойств, связанных с шириной. Не думаю, что есть что-то, что превышает ширину страницы. Сначала я подумал, что это из-за того, что я установил левый отступ моего класса top_header на 20 пикселей, но когда я попытался изменить его на значение%, это не сработало. Затем я попытался удалить его, но проблема не исчезла. Может ли кто-нибудь помочь мне решить проблему?

Вот мой HTML / CSS:

@font-face {
  font-family: Montserrat-Regular;
  src: url("Montserrat-Regular.ttf");
}

#my_banner {
  background-image: url('banner.jpg');
  "
 padding-bottom: 100px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

#banner_chibi {
  width: 50%;
  padding-left: 40px;
}

.navbar {
  margin-bottom: 0;
  width: 100%;
}

.navbar,
.dropdown-menu {
  background: #e5e5e5 !important;
  border: 0;
}

.navbar li a {
  color: #7e7e7e;
}

#top_header {
  font-family: Montserrat-Regular;
  color: black;
  font-size: 20px;
  padding-left: 20px;
  padding-right: 30px;
}

#red {
  color: #cd2d3a;
}

#blue {
  color: #0047a0;
}

#main_content {
  margin-top: 4%;
}

.left_card {
  width: 20%;
  height: 400px;
  margin-left: 4%;
  position: fixed;
}

.right_card {
  width: 90%;
  margin-left: 5%;
}

#card_1 {
  position: relative;
  height: 1000%;
  top: 20%;
}

html,
body {
  height: 100%;
}

body {
  background: #5e5e5e;
  overflow-x:
}

Вот визуальная проблема, которую я замечаю, справа (черный цвет не является частью веб-сайта). (https://i.stack.imgur.com/CxaGF.jpg) Большое спасибо, я был бы очень признателен за любой вклад. Кроме того, если кто-то заметит в моем коде вредные привычки, сообщите мне тоже.

Answer 1

Добавить класс без промежутков к div строки.

<div id="my_banner" class="row no-gutters">

<div class="row no-gutters" id="main_content">

@font-face {
  font-family: Montserrat-Regular;
  src: url("Montserrat-Regular.ttf");
}

#my_banner {
  background-image: url('banner.jpg');
  "
 padding-bottom: 100px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

#banner_chibi {
  width: 50%;
  padding-left: 40px;
}

.navbar {
  margin-bottom: 0;
  width: 100%;
}

.navbar,
.dropdown-menu {
  background: #e5e5e5 !important;
  border: 0;
}

.navbar li a {
  color: #7e7e7e;
}

#top_header {
  font-family: Montserrat-Regular;
  color: black;
  font-size: 20px;
  padding-left: 20px;
  padding-right: 30px;
}

#red {
  color: #cd2d3a;
}

#blue {
  color: #0047a0;
}

#main_content {
  margin-top: 4%;
}

.left_card {
  width: 20%;
  height: 400px;
  margin-left: 4%;
  position: fixed;
}

.right_card {
  width: 90%;
  margin-left: 5%;
}

#card_1 {
  position: relative;
  height: 1000%;
  top: 20%;
}

html,
body {
  height: 100%;
}

body {
  background: #5e5e5e;
  overflow-x:
}

Answer 2

Видите ли, я думаю, это из-за поля по умолчанию на странице HTML.

Попробуйте это в вашем файле CSS. Это может помочь

html,
body {
    height: 100%;
    margin : 0;
}

в вашем CSS, используйте это (я удалил " из кода)

#my_banner {
       background-image: url('banner.jpg');
       padding-bottom: 100px;
       overflow: hidden;
       width: 100%;
       max-width: 100%;
}

Поделитесь своим ответом после того, как попробуете это.