Выравнивание заголовка и кнопки на одной строке на разных экранах в HTML/CSS ⇐ CSS

[Anonymous]

Я изучаю веб-разработку и работаю над проектом. У меня на странице есть два элемента:
Заголовок с градиентом (подзаголовок градиент-текст).
Кнопка (следующая кнопка).
Мне нужны оба элемента. элементы должны располагаться в одной строке внизу страницы. Заголовок должен быть выровнен по левому краю, а кнопка — по правому. Это прекрасно работает на моем ноутбуке, но на моем кампусном ноутбуке элементы не остаются параллельными и их позиции смещаются.
Вот соответствующий код CSS и HTML, который я использую:
Вот соответствующий код CSS и HTML, который я использую:
p>

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

.subheading {
font-family: 'Georgia', cursive;
font-size: 30px;
font-weight: 9000;
line-height: 1.5;
padding-left: 150px;
margin: 0;
margin-left: 10px;
margin-top: 80px;
}

.gradient-text {
font-size: 30px;
font-weight: 9000;
background: linear-gradient(270deg, #5b42f3, #ff00a0, #ffcc00, #5b42f3);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-animation 5s ease infinite;
margin: 0;
line-height: 1.5;
letter-spacing: 0.08em;
margin-left: 10px;
margin-top: 80px;
}

@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.next-button {
position: fixed;
bottom: 157px;
right: 375px;
z-index: 10;
display: flex;
align-items: center;
gap: 1px;
font-family: 'Georgia', cursive;
color: rgb(19, 9, 9);
font-weight: bold;
text-decoration: none;
border-radius: 6px;
padding: 3px 6px;
transition: background-color 0.3s;
}

.next-button svg {
width: 30px;
height: 30px;
}

.next-button:hover {
color: rgb(155, 55, 9);
font-weight: bold;
}

.next-button:hover svg {
stroke: rgb(155, 55, 9);
}

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

Document


 Lorem ipsum 

[url=home.html]
Continue



[/url]

Подробнее здесь: https://stackoverflow.com/questions/791 ... in-html-cs