Да, число с плавающей запятой перекрывает элемент блока отображения.
Если вы хотите, чтобы 2 поля отображались рядом друг с другом, и заполните экран, вы можете использовать CSS gridbox
HTML
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
CSS
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 50px; //This is the vertical gap between the 2boxes.
width: 100%;
}
Если вы хотите, чтобы 1 коробка была больше, вы можете изменить 50% 50%, например, на 30% 70%
Тогда если вы хотите отобразить поля под каждым из них на меньшем экране, добавьте это к CSS
@media (max-width: 900px) {
.container {
grid-templace-columns: 1fr;
}
}
И если вы не хотите, чтобы 2 коробки отображали на экране полный комплект, вы можете изменить с помощью Элемент .container в вашем CSS.