Ошибка стиля CSS с React: контейнер смещается с использованием ширины области просмотра [закрыто] ⇐ CSS

[Anonymous]

По сути, у меня проблема с шириной области просмотра, которая не работает должным образом в React. Я просто хочу сделать простой дизайн со страницей, имеющей фон и таймер с размытым фоном в этой строке.
Изображение такое, какое у меня сейчас есть: часы с раздражающим CSS. Проблема в том, что мой контейнер сдвинут влево и появляется полоса прокрутки, когда я использую ширину порта просмотра?
Вот мои файлы и код, если кто-то хочет взглянуть на содержимое CSS. Я новичок в курсе React от Bro Code.
Вот файл CSS:
body {
background-image: url(/NightSky.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
margin: 0;
}

.clock {
color: white;
font-size: 6rem;
font-weight: bold;
font-family: monospace;
text-align: center;
margin: 0;
text-shadow: 3px 3px 5px hsla(0, 0%, 0%, 1);
}

.clock-container {
backdrop-filter: blur(10px);
width: 100vw;
flex-shrink:0;
height: 100px;
margin:0;
border: 1px solid black;
}

Вот файл .jsx:
import React, {useState, useEffect} from 'react'

const Clock = () => {
return (


00:00:00


)
}

export default Clock


Подробнее здесь: https://stackoverflow.com/questions/798 ... port-width