Пытаюсь написать сайт с везде относительными величинами. При приближении вся страница съезжает направо вниз. Почему так происходит и как это фиксить?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "style.css">
<script src="script.js"></script>
<title>Кнопка</title>
</head>
<body>
<input type="text" id="inp" readonly>
<div id="buttonsAndTime">
<button type = "button" id = "but" onClick = "opening()">Поменять слово</button>
<button type = "button" id = "but1" onClick = "gg()">Старт</button>
<button type = "button" id = "but2" onClick = "pause()">Пауза</button>
<button type = "button" id = "but3" onClick = "">Передать ход</button>
<button type = "button" id = "but4" onClick = "">Забанить слово</button>
<button type = "button" id = "but5" onClick = "go()">Дальше</button>
<button type = "button" id = "but6" onClick = "">Статистика</button>
<button type = "button" id = "but11" onClick = "gg()">Старт</button>
<input type="text" id="time" value="10:20" onClick="" disabled>
<input type="text" id="time1" hidden disabled>
</div>
</body>
</html>
#but, #but1, #but11, #but2, #but3 {
position: absolute;
width: 7%;
}
#inp {
width: 15%;
margin: 21% 41.56%;
height: 4.7%;
border: thin solid lightsteelblue;
outline: none;
}
input[type=text] {
text-align: center;
background-color: white;
color: black;
font-family: "Trebuchet MS";
font-size: 3.5vh;
}
button {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
cursor: pointer;
}
@font-face {
font-family: Dosis;
src: url(fonts/Dosis.ttf);
}
#but, #but11, #but1, #but2, #but3, #but4, #but5, #but6 {
display: inline-block;
text-align: center;
text-decoration: none;
border: thin solid transparent;
padding: 0.1% 1%;
color: #ffffff;
background-color: #9555af;
cursor: pointer;
font-family: Dosis cursive;
font-size: 2.5vh;
}
#but:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#time {
width: 10%;
position: absolute;
height: 8%;
border: none;
outline: none;
z-index: 1;
}
#time1 {
width: 10%;
position: absolute;
height: 8%;
border: none;
outline: none;
z-index: 2;
}
input[disabled] {
text-align: center;
color: black;
font-family: 'Century Gothic';
font-size: 3.5vh;
background: linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229));
}
#but1:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but1 {
outline: none;
}
#but11 {
outline: none;
}
#but11:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but2 {
outline: none;
}
#but2:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but3 {
outline: none;
}
#but3:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but2, #but3 {
padding: 0.1% 1%;
width: 10%;
}
#but1, #but2 {
width: 7%;
}
#but, #but3 {
width: 10%;
padding: 0.1% 1%;
}
#but4:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but5:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#but6:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
#buttonsAndTime, #but, #but11, #but1, #but2, #but3, #but4, #but5, #but6, #inp, #time, #time1 {
position: absolute;
}
#buttonsAndTime {
width: 98%;
height: 98%;
}
#but1 {
margin-top: 25%;
margin-left: 42.4%;
visibility: hidden;
outline: none;
}
#but2 {
margin-top: 25%;
margin-left: 50.9%;
visibility: hidden;
outline: none;
}
#but5 {
margin-top: 25%;
margin-left: 50.9%;
width: 7%;
visibility: hidden;
outline: none;
}
#but11 {
margin-top: 25%;
margin-left: 46.8%;
outline: none;
}
#but3, #but4, #but6, #but {
width: 11%;
height: 5.5%;
}
#but6 {
margin: 6% 4%;
outline: none;
}
#but4 {
margin: 9% 4%;
outline: none;
}
#but {
margin: 12% 4%;
outline: none;
}
#but3 {
margin: 15% 4%;
visibility: hidden;
outline: none;
}
#time, #time1 {
margin: 6% 64.7%;
}
#but6, #but4, #but3, #but {
margin-left: 24%;
}
