Не могу прикрепить блок к секции?

Question

[Romkel]

Добрый день, только начал изучать html, css. При выполнении задания не могу понять , как прикрепить блок к правому краю отступа (который коричневого цвета), чтобы при изменении масштаба страницу этот блок не уплыл.
https://codepen.io/roman-zolotov/pen/ZEbrbvO

Comments

[anakondoz]

Какой блок, не видно что там что то плывет

[Romkel]

anakondoz, блоки Chicken, Beef, Sushi должны быть в правом углу коричневой зоны , я могу это сделать , но при изменении масштаба оно поплывет. https://codepen.io/roman-zolotov/pen/ZEbrbvO выставил как должно быть

[anakondoz]

Romkel, Тогда Вам h3 надо перенести в p тег.
h3 ставим

position: absolute;
    right: -1;
    top: -1;

а p ставим position: relative;

div>h3#Chicken {
	background-color: rgb(59, 171, 195); 
}

и это подправить , так как у h3 родитель p а не div

[Romkel]

anakondoz тогда p почему-то раздваивается , а таблички просто в правый верхний угол переходятhttps://codepen.io/roman-zolotov/pen/ZEbrbvO

[xdevelx]

anakondoz,

Тогда Вам h3 надо перенести в p тег.

Зачем вы предлагаете человеку сделать невалидную разметку? Нельзя заголовки размещать в абзацах.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
https://www.w3.org/TR/html52/grouping-content.html...

Answer 1

[Арсений Матыцин]

У тебя отступ у параграфа margin:auto, т.е. не фиксированный, а позиция заголовка имеет жесткую фиксацию от правого края 25px, при разных разрешениях отступ у параграфа разный, следовательно при несовпадении разница видна невооруженным глазом.

Я рекомендую и параграфу и заголовку в данном конкретном примере выдать фиксированные отступы:

p {
  ...
  /* width: 90%; */
  margin-right: 25px;
  margin-left: 25px;
  ...
}

И да, убрать у абзаца размер процентный. Это блочный элемент по умолчанию и он заполнит все вширь.