Не работает margin 0; слева от h1 есть отступ маргина хотя он установлен как 0

Question

body {
  margin: 0px;
  padding: 0px;
  color: black;
}

a {
  text-decoration: none;
}

header {
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: black;
  height: 100px;
  width: auto;
}

header h1 {
  margin: 0px;
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 0px;
  padding-bottom: 0px;
  width: 500px;
}

header img {
  padding-bottom: 30px;
  float: right;
  height: 50px;
  width: 50px;
}

<header>
  <h1>Мясная лавка Большого Дейва</h1>
  <img src="img/cart2.jpg" />
</header>

Answer 1

вы забыли про paddind h1. Если посмотреть в инспекторе кода, у вас там padding-left: 30px; что и создает пробел.

body {
  margin: 0px;
  padding: 0px;
  color: black;
}

a {
  text-decoration: none;
}

header {
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: black;
  height: 100px;
  width: auto;
}

header h1 {
  margin: 0px;
  padding-top: 30px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  width: 500px;
}

header img {
  padding-bottom: 30px;
  float: right;
  height: 50px;
  width: 50px;
}

<header>
  <h1>Мясная лавка Большого Дейва</h1>
</header>

Answer 2

Может быть попробовать так?

html, body {
  margin: 0px;
  padding: 0px;
  color: black;
}

a {
  text-decoration: none;
}

header {
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: black;
  height: 100px;
  width: auto;
}

header h1 {
  margin: 0px;
  padding-top: 30px;
  /*padding-left: 0px;*/
  padding-right: 0px;
  padding-bottom: 0px;
  width: 500px;
}

header img {
  padding-bottom: 30px;
  float: right;
  height: 50px;
  width: 50px;
}

<header>
  <h1>Мясная лавка Большого Дейва</h1>
  <img src="img/cart2.jpg">
</header>

БЛОГ НА HUSL

Не работает margin 0; слева от h1 есть отступ маргина хотя он установлен как 0

Ответы (2 шт):