Как я могу сосредоточить текст с помощью ввода, который, кажется, всегда вне центра? ⇐ CSS

[Anonymous]

Я испытываю странную проблему в своем дизайне: входная коробка для поиска не выстраивается прямо под заголовком «Spotify Spy», даже когда все мои размеры проверки сообщают о даже ширине. Ниже приведено, что я смотрел в инструментах разработчика браузера: < /p>
Контейнер (.title-container) Ширина: 282 px < /p>
Heading Width: 282 px < /p>
Поиск вход: 282 px < /p>






:root {
--primary-green: #1db954;
--hover-green: #1ed760;
--light-bg: #333;
--dark-bg: #151515;
--light-text: #ffffff;
--muted-text: #b3b3b3;
}

body {
background: var(--dark-bg);
color: var(--light-text);
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
min-height: 100vh;
padding: 1rem;
}

#search {
display: block;
width: 250px;
max-width: 90%;
margin: 0.5rem auto;
padding: 0.6rem 1rem;
font-size: 1rem;
border: none;
border-radius: 9999px;
background: var(--light-bg);
color: var(--light-text);
outline: none;
}

h1 {
text-align: center;
margin-bottom: 1rem;
color: var(--primary-green);
}

input::placeholder {
color: var(--muted-text);
}

input:focus {
background: var(--light-bg);
}

button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
border: none;
border-radius: 5px;
background: var(--primary-green);
color: var(--light-text);
cursor: pointer;
}

button:hover {
background: var(--hover-green);
}

.elipsis-btn,
.elipsis-btn:hover {
padding: 0 0.5rem 0 0;
font-size: 1rem;
background: transparent;
}

.save-btn,
.save-btn:hover {
padding: 0 2rem 0 0;
font-size: 1rem;
background: transparent;
}

.play-icon,
.play-icon:hover {
color: var(--light-text);
}

i {
vertical-align: middle;
color: var(--light-text);
}

.scalable:hover {
scale: 1.05;
color: var(--light-text);
}

.isFavorite {
color: var(--hover-green);
}

.isFavorite:hover {
color: var(--hover-green);
}

.save-btn i,
.elipsis-btn i,
.play-btn {
opacity: 0;
}

.cover-img {
opacity: 1;
}

.track-row:hover .save-btn i,
.track-row:hover .elipsis-btn i,
.track-row:hover .play-btn {
opacity: 1;
}

.track-row:hover .cover-img {
opacity: 0.5;
}

.track-row span.comma {
display: inline-block;
color: var(--muted-text);
margin: 0 4px 0 0;
}

.track-row {
display: flex;
align-items: center;
border-radius: 6px;
padding: 0.75rem;
margin: 0;
width: 100%;
max-width: 700px;
}

.track-row:hover {
background: var(--light-bg);
}

.track-row img {
width: 50px;
height: 50px;
border-radius: 4px;
margin-right: 1rem;
}

.track-info {
flex: 1;
}

.track-info h3 {
margin: 0;
font-size: 1.1rem;
}

.track-info p {
margin: 0.2rem 0;
font-size: 0.85rem;
color: var(--muted-text);
}

.track-row span {
margin-right: 1rem;
font-size: 0.9rem;
color: var(--muted-text);
white-space: nowrap;
}

.track-row a {
color: var(--muted-text);
text-decoration: none;
font-size: 1rem;
}

.track-row a:hover {
color: var(--light-text);
text-decoration: underline;
}

#tracks-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 1.5rem 0;
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... off-center