Как расширить цветную рамку до краев? ⇐ CSS

[Anonymous]

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

.output-container {
background: #333;
color: #fff;
padding: 1rem 1;
width: 100%;
top: 0;
z-index: 1000;
text-align: center;
}

Класс только что добавлен, однако я хочу, чтобы серая часть за текстом доходила до краев экрана, но я не могу просто увеличить значение ширины, поскольку текст и поле связаны друг с другом таким образом, это увеличивает степень отклонения текста вправо.
Я попробовал увеличить значение ширины в классе, однако в результате и текст, и фон расширились вправо, оставив текст отображается неправильно, а левая часть серого фона не перемещается.

Подробнее здесь: https://stackoverflow.com/questions/786 ... -the-edges