サイトの画面サイズを変更すると一部だけ位置が変わってしまいます

サイトを作成しているのですが、幅を変えたときに位置が変わらないようにしたいです。

サイト作成中他の画像や文字はtransform: translateで指定して位置が変わらないようにできたのですが、なぜかスライダー付き文章だけ幅を変更した際に位置が変わってしまいます。

発生している問題・エラーメッセージ

コード

body{
background: #1c1c23;
height: 300px;

}

.example p {
position: absolute;
color: white;
top: 0;
left: 0;
}

.img_a img{
maX-width: 100%;

}

.example img {
position:fixed;
top: 0px;
width: 100%;
}
.nanasi img {
z-index: 2;
position: absolute;
transform: translate(0%, -15%);
width: 100%;
margin: 0 auto;

}
.titela img {
z-index: 2;
maX-width: 100%;
position: absolute;
transform: translate(0%, -300%);
}

}

.menu_item{
z-index: 4;
display: flex;
justify-content: center;
flex-wrap: wrap;

}

.menu a{
z-index: 4;
color: #fff;
text-decoration: none;
font-family: 'Courier New';
font-size: 25px;
margin-left: 45px;

}

.site-header{
z-index: 4;
position: fixed;
width: 100%;
}

ul {

width: 100%;

padding: 0;

list-style-type: none;

text-align: center;
z-index: 4;

}
ul li {
z-index: 4;
display: inline-block;　

line-height: 100%;
}

{
margin: 0px;
padding: 0px;

}

.main-text p{
z-index: 1;
position: absolute;
letter-spacing: 0.13em;
color: #ffffff;
background-color:rgba(255,255,255,0.2);

}

.sabtitel{
z-index: 1;
font-family: 'ヒラギノ角ゴ Std W8';
font-size: 2.4vmax;
transform: translate(0%, -1200%);
width: 50%;
position: absolute;
padding-left: 20px;

}
.sabbtitel{
z-index: 1;
font-family: 'ヒラギノ角ゴ Pro W6';
font-size: 1.6vmax;
transform: translate(0%, -400%);
width: 50%;
position: absolute;
padding-left: 20px;

}

.sabtitel2{
z-index: 1;
font-family: 'ヒラギノ角ゴ Std W8';
font-size: 2.4vmax;
transform: translate(0%, -380%);
width: 50%;
position: absolute;
padding-left: 20px;

}
.sabbtitel2{
z-index: 1;
font-family: 'ヒラギノ角ゴ Pro W6';
font-size: 1.6vmax;
transform: translate(0%, -65%);
width: 50%;
position: absolute;
padding-left: 20px;

}

}
span{
z-index: 1;
color: #f00078;
}

.button::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: #fff;
transform-origin: right top;
transform: scale(0, 1.02);
transition: transform .3s;
}
.button:hover::before {
transform-origin: left top;
transform: scale(1, 1.02);
}

.button {
font-size: 2.0vmax;
top: 185%;
right: 0%;
left: 65%;
position: relative;
display: inline-block;
padding: .4em 2em;
border: 6px solid #40b1aa;
color: #40b1aa;
text-align: right;
text-decoration: none;
transition: .3s;
z-index: 5;
}
.button:hover {

color: #40b1aa;
}

.tyui{
font-family:'Avenir Next Condensed';
font-size: 5.4vmax;
color: #fff;
letter-spacing: 5px;
transform: translate(0%, 700%);
position: absolute;
border: 0;
text-align:center;
left: 0;
right: 0;
margin: auto;
}

.tyui2{
font-family:'Avenir Next Condensed';
font-size: 2vmax;
color: #fff;
letter-spacing: 5px;
transform: translate(0%, 1980%);
position: absolute;
text-align:center;
left: 0;
right: 0;
margin: auto;
}

.tyui01 img{
transform: translate(50%, 250%);
position: absolute;
width: 20%

}

.tyui02 img{
transform: translate(150%, 250%);
position: absolute;
width: 20%

}

.tyui03 img{
transform: translate(250%, 250%);
position: absolute;
width: 20%

}

.tyui04 img{
transform: translate(350%, 250%);
position: absolute;
width: 20%

}

.tyui3{
font-family:'Avenir Next Condensed';
font-size: 2vmax;
color: #fff;
letter-spacing: 5px;
transform: translate(0%, 3200%);
position: relative;
text-align:center;
left: 0;
right: 0;
margin: auto;
}

.tyui4{
overflow:auto;
margin:0 auto 20%;
padding:2.4%;
width:51%;
height:10%;
position: absolute;
left: 0;
right: 0;
transform: translate(0%, 1000%);
border:0.1vmax solid #fff;