Испытание волшебная дверь

#1

body {
margin: 0;
}

ul {
margin: 0 auto;
display: flex;
justify-content: center;
width: 320px;
padding: 10px;
padding-top: 20px;
padding-bottom: 40px;
}

.door {
width: 100px;
}

li.door-1 {
margin-right: auto;

}

li.door-3 {
margin-left: auto;

}

.container {
display: flex;
width: 550px;
margin: 5px;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

.note-3 {
width: 100px;
margin-left: auto;
margin-top: auto;
}

Не могу понять почему всё кроме подвала съезжает чуть влево

#2

Все дело в том, что padding увеличивает размер контейнера, а margin нет.

.container {
display: flex;
width: 550px;
padding: 5px;
}

1 Симпатия
#3

Мой вариант на 92.4%. Не понимаю, что нужно сделать, чтобы справа увеличился размер

Сетки. Двери. Задача

body {
margin: 0;
}

ul {
margin: 0;
}

.header-title {
margin-left: 5px;
}

.page-main {
margin-left: 5px;
}

.doors-list {
display: flex;
justify-content: space-between;
width: 320px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-left: 10px;
padding-bottom: 40px;
padding-right: 10px;
}

.door {
width: 100px;
}

.container {
display: flex;
margin: 5px;
width: 550px;
}

.note-1 {
width: 150px;
}

.note-2 {
width: 200px;
margin-top: auto;
margin-bottom: auto;
margin-left: 25px;
}

.note-3 {
width: 100px;
margin-top: auto;
margin-left: auto;
}

#4

Сработало, спасибо

#5

Код на 100%. Можете сравнить и найти у себя ошибки.
Навскидку попробуйте поменять “justify-content: space-between;” на “center”

body {
 margin: 0;
}

ul {
 margin: 0;
}

.doors-list {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 20px 10px 40px;
  width: 320px;
}

.door {
  margin: auto;
}

.door-1 {
  width: 100px;
  margin-right: 10px;
}

.door-2 {
  width: 100px;
  margin-right: 10px;
}

.door-3 {
  width: 100px;
}
.container {
  display: flex;
  width: 550px;
  padding: 5px;
}

.note-1 {
   width: 150px;
   margin-right: 25px;
}

.note-2 {
  width: 200px;
  margin-top: auto;
  margin-bottom: auto;
}

.note-3 {
  margin-left: auto;
  margin-top: auto;
  width: 100px;
}
#6

Только так у меня получилось пройти на 100%
width: 561px!!! 561, Карл!))))
и
padding-right: 4px; 4!!! А почему бы собственно и нет?)))

body {
width: 561px;
margin: 0;
}

.doors-list {
display: flex;
justify-content: center;
margin: auto;
padding: 20px 10px 40px;
width: 320px;
}

.door {
width: 100px;
}

.door-2 {
margin-left: 10px;
margin-right: 10px;
}

.container {
display: flex;
padding: 5px;
padding-right: 4px;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin-bottom: auto;
margin-top: auto;
}

.note-3 {
width: 100px;
margin-left: auto;
margin-top: auto;
}

#7

Сравнил твой код со своим и нашел ошибку - в футере получается вместо padding написал margin и все съехало у меня из-за этого.

Вот тоже 100% со space-between.

body {
margin: 0;
}

ul {
margin: 0;
}

/*.header-title {
margin-left: 5px;
}

.page-main {
margin-left: 5px;
}*/

.doors-list {
display: flex;
justify-content: space-between;
width: 320px;
margin: 0 auto;
padding: 20px 10px 40px;
}

.door {
width: 100px;
}

.container {
display: flex;
padding: 5px;
width: 550px;
}

.note-1 {
width: 150px;
}

.note-2 {
width: 200px;
margin-top: auto;
margin-bottom: auto;
margin-left: 25px;
}

.note-3 {
width: 100px;
margin-top: auto;
margin-left: auto;
}

И подскажи, как так красиво код вставляешь

#8

По вставке кода - перед каждой строчкой 4 пробела нужно поставить, тогда он в такой блок будет выноситься построчно. Запарочно, даже через CTRL-C + CTRL-V, но как по мне стоит того, код более читабелен.

#10

body {
margin:0;
}

ul {
margin:0;
}

.doors-list {
display:flex;
justify-content: center;
width: 320px;
padding: 10px;
padding-top: 20px;
padding-bottom: 40px;
margin-right: auto;
margin-left: auto;
}

.door {
width: 100px;
}

.door-2 {
margin-left: 10px;
margin-right: 10px;
}

.container {
display:flex;
width: 550px;
padding: 5px;
}

.note-1 {
width: 150px;
margin-right: 25px;
}

.note-2 {
width: 200px;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

.note-3 {
width: 100px;
margin-top: auto;
}

#11

Вы можете смело избавиться от лишних:

.door {
margin: auto;
}

И удалить в door-list

justify-content: center;

в нем нет смысла, так как вы с помощью margin уже установили отступы для door-1 и door-2.
Надо что-то одно :wink: Но если через justify-content, тогда значение должно быть space-between, а не center

#12 
body, ul {
  margin: 0;
}

.door {
  width: 100px;
}
.doors-list {
  display: flex;
  justify-content: space-between;
  width: 320px;
  margin: 0 auto;
  padding: 20px 10px 40px;
}

.container {
  display: flex;
  width: 550px;
  padding: 5px;
  margin: 0 auto;
}
.note-1 {
  width: 150px;
  margin-right: 25px;
}
.note-2 {
  width: 200px;
  margin-top: auto;
  margin-bottom: auto;
}
.note-3 {
  width: 100px;
  margin-left: auto;
  margin-top: auto;
}