Где ошибка в коде HTML, CSS?

Question

[Mr.nobody]

Привет всем. Изучаю HTML, CSS и попутно делаю краткий справочник-конспект для себя постепенно применяя полученные знания. При открытие файла index.html в браузере все блоки расположены правильно, а блок "Список определений" (строка 192, id="definition-list") прижался еще правее остальных. Почему? Перепроверил стили, теги. Почему так произошло, подскажите. Также рад буду услышать замечания, критику по остальному коду. песочница

Comments

[Gortyser]

Замечание: никто не будет смотреть проект на гитхабе, выложите в какую-нибудь песочницу.

[Mr.nobody]

Gortyser, здесь

[Gortyser]

Mr.nobody, убрать float: right для .article. Чисто визуально вообще ничего не меняется, зачем он там? Как вариант можно не убирать флоат, а задать для статей ширину 100% и box-sizing: border-box.

[Mr.nobody]

Gortyser, я убирал float: right для .article, все отображается корректно, наверно он лишний, согласен, но до блока "Список определений" с float: right для .article все отображалось правильно и после него остальные блоки располагаются правильно, вопрос что с этим блоком не так, почему браузер прижимает его правее остальных.

[Gortyser]

Mr.nobody, контента в нем просто мало, в остальных куча текста и он занимает всю ширину, а в списке определений небольшие предложения, которых для всей ширины недостаточно.

Answer 1

[Никита]

потому что width: auto стоит

Answer 2

[Mr.nobody]

причина:
1. мало контента в блоке
2. плюс у блока width: auto и float: right
в результате он не только прижимается в право но и уменьшается в размере
решение:
- убрать float: right
Спасибо Gortyser Gortyser и Никита Никита.

Answer 3

[adrenalinruslan]

Сделай для одного блока:

float:left;
width: 70%;

А для второго:

float: right;
width: 30%