Почему граница текста не работает html css ⇐ CSS

[Anonymous]

Я новичок в HTML и CSS, пытаюсь научиться этому, создав свой первый веб-проект, представляющий собой список дел. У меня есть набросок того, как я хочу, чтобы это выглядело, и, поскольку я еще не знаю, как работать с датами на своем веб-сайте, я просто пытаюсь создать абзац со случайной датой. я хочу, чтобы это выглядело так:


и я сделал это так.
Проблема в том, что когда я меняю размер страницы хотя бы на немного, я получаю это:

Код: Выделить всё

* {
font-family: "Instrument Serif", serif;
font-weight: 400;
}

h1 {
font-size: 50px;
margin: 10rem 0 1rem 0;
text-align: center;
font-weight: 550;
}

.date {
text-align: center;
border: 0.5px solid #888579;
background-color: #ececec;
color: #888579;
margin: 0 900px 20px 900px;
border-radius: 7px;
padding: 3px;
}

.top-container {
display: flex;
justify-content: center;
align-items: center;
}

.add-input {
box-shadow: 0 8px 6px -6px #3a3937;
font-style: italic;
font-size: 18px;
padding: 9px 100px;
border-radius: 7px;
border: 0;
text-align: center;
margin-right: 20px;
margin-left: 20px;
}

button {
box-shadow: 0 8px 6px -6px #3a3937;
font-weight: bolder;
border: none;
padding: 9.5px 17px 9px 17px;
margin: 0 20px 0 10px;
background-color: #888579;
color: #fff;
border-radius: 10px;
cursor: pointer;
font-size: 20px;
}

.box {
border: 0.2px solid #888579;
border-radius: 20px;
padding: 2rem 2rem 2rem 2rem;
margin: 10px auto 20px;
width: fit-content;
height: fit-content;
background-color: #ebeae8;
}

ul li {
list-style: none;
user-select: none;
font-size: 25px;
cursor: pointer;
padding: 10px;
}

footer {
text-align: center;
font-weight: 550;
color: #000000;
font-size: 12px;
}

Код: Выделить всё

to-do list
[*]






to-do list
05/10/24




+

[list]
task 1
[*]task 2
[*]task 3
[/list]


@1wakos

может кто-нибудь помочь? я не вижу ошибок

Подробнее здесь: https://stackoverflow.com/questions/790 ... g-html-css