Css создает странный пробел внутри контейнера при размещении элементов строчного блока рядом ⇐ CSS

[Anonymous]

Я не знаю, почему виден этот пробел. Я не понимаю, почему это происходит. Я только что изменил код из учебного материала, и он не работает.

это мой код

Пример макета html, тело { дополнение: 0; маржа: 0; } заголовок { ширина: 100%; высота: 100 пикселей; цвет фона: красный; } дел { высота: 700 пикселей; маржа: 0 авто; } в стороне { ширина: 29,71%; цвет фона: бирюзовый; высота: 700 пикселей; отображение: встроенный блок; } основной { ширина: 40%; высота: 700 пикселей; цвет фона: розовый; отображение: встроенный блок; } нижний колонтитул { ширина: 100%; высота: 200 пикселей; цвет фона: синий; }

Я не знаю, почему после акваблока виден этот пробел.

Сценарий, в котором автор идеально выровнял элементы. Однако я не смог найти разницу.

Пример макета html, тело { маржа: 0; заполнение: 0; } .Сворачивать { максимальная ширина: 1400 пикселей; маржа: 0 авто; } .Заголовок { ширина: 100%; высота: 130 пикселей; цвет фона: #038c5a; } .WrapMiddle { ширина: 100%; размер шрифта: 0; } .Левый { высота: 625 пикселей; ширина: 20,83%; цвет фона: #03a66a; отображение: встроенный блок; } .Середина { высота: 625 пикселей; ширина: 68,75%; цвет фона: #bbbf90; отображение: встроенный блок; } .Верно { высота: 625 пикселей; ширина: 10,41%; цвет фона: #03a66a; отображение: встроенный блок; } .Футер { высота: 200 пикселей; ширина: 100%; цвет фона: #025059; }