Негабаритный текст на статической странице ⇐ Html

[Anonymous]

Я сейчас работаю над приложением погоды, но когда я делал дизайн, я столкнулся с проблемой с пространством вокруг большого персонажа. На изображении ниже я сосредоточил раздел с границей и контейнерами деревьев, но персонаж имеет огромный контейнер, и из -за этого они, по -видимому, не центрированы. Я хочу, чтобы контейнер соответствовал шрифту. Pre Class = "Snippet-Code-CSS Lang-CSS PrettyPrint-Override">@import url("https://fonts.googleapis.com/css2?famil ... splay=swap");

* {
background-color: #e8e8e8;
font-family: "Space Grotesk", serif;
padding: 0;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
}

body {
min-height: 100vh;
display: flex;
}

main {
margin: 80px 85px;
border: red 1px solid;
flex: 1;
position: relative;
}

.first-section {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}

.first-section .cityName {
font-size: 168pt;
font-weight: 00;
}

.first-section input {
width: 400px;
height: 60px;
border-radius: 20px;
top: 60px;
right: 0;
position: absolute;
text-align: center;
font-size: 20pt;
font-weight: lighter;
}

.second-section {
display: flex;
justify-content: space-between;
bottom: 0px;
position: absolute;
width: 100%;
border: solid 1px rgb(57, 23, 179);
align-items: center;
}

.second-section .square-wrapper {
display: flex;
gap: 80px;
}

.second-section .square-wrapper .square {
height: 300px;
width: 150px;
border-radius: 20px;
border: solid 1px blue;
}

.second-section .p-wrapper p {
font-size: 300pt;
font-weight: 500;
}< /code>



`your text`
Brazil







Rain
Moon
Wind



12°




< /code>
< /div>
< /div>
< /p>
Я попытался удалить маржу для основного контейнера, потому что я хочу позиционировать 3 DOV и степень немного ниже из -за негабаритного контейнера вокруг степени. Тем не менее, идеальным решением было бы для того, чтобы контейнер идеально соответствовал персонажу.

Подробнее здесь: https://stackoverflow.com/questions/794 ... tatic-page