До того когда я вставил кнопку, текст заголовка стоял в верхнем левом углу, когда вставил кнопку то он начал стоять по середине вместе с кнопками, и я никак не могу переместить его. Пробовал все способы - без успешно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>RunPC Company </title>
</head>
<body>
<p>RUNPC</p>
<div class="multi-button">
<button>MAIN</button>
<button>CATALOG</button>
<button>ABOUT US</button>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
html,
body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(-45deg, #000000, #424242, #000000);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
body {
margin: 50px;
margin-top: -30px;
font-size: 60px;
font-weight: bold;
color: rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
}
:root {
--border-size: 0.125rem;
--duration: 250ms;
--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--font-family: monospace;
--color-primary: white;
--color-secondary: black;
--color-tertiary: dodgerblue;
--shadow: rgba(0, 0, 0, 0.1);
--space: 1rem;
}
* {
box-sizing: border-box;
}
body {
height: 1vh;
margin: 0 auto;
display: grid;
place-items: center;
padding: calc(var(--space) * 2);
max-width: 800px;
}
.multi-button {
display: inline-flex;
width: 100%;
box-shadow: var(--shadow) 4px 4px;
}
.multi-button button {
flex-grow: 1;
cursor: pointer;
position: relative;
padding: calc(var(--space) / 1.125) var(--space) var(--space);
border: var(--border-size) solid black;
color: var(--color-secondary);
background-color: var(--color-primary);
font-size: 1.5rem;
font-family: var(--font-family);
text-transform: lowercase;
text-shadow: var(--shadow) 2px 2px;
transition: flex-grow var(--duration) var(--ease);
}
.multi-button button+button {
border-left: var(--border-size) solid black;
margin-left: calc(var(--border-size) * -1);
}
.multi-button button:hover,
.multi-button button:focus {
flex-grow: 2;
color: white;
outline: none;
text-shadow: none;
background-color: var(--color-secondary);
}
.multi-button button:focus {
outline: var(--border-size) dashed var(--color-primary);
outline-offset: calc(var(--border-size) * -3);
}
.multi-button:hover button:focus:not(:hover) {
flex-grow: 1;
color: var(--color-secondary);
background-color: var(--color-primary);
outline-color: var(--color-tertiary);
}
.multi-button button:active {
transform: translateY(var(--border-size));
}
