БЛОГ НА HUSL


Помогите пожалуйста! Сайт неправильно отображается

Автор вопроса: Мансур

Помогите пожалуйста! Сайт неправильно отображается слева в углу как на картинке, что нужно сделать чтобы он был по центру как все нормальные сайты. Пробовал применять на блоки margin:auto, не помогает. Внизу прилагается код, заранее спасибо. Прилагается полный код html и css.

body{
    font-family: 'Montserrat-Thin', sans-serif;
}
.header{
    position: absolute;
    width: 1440px;
    height: 70px;
    left: 0px;
    top: 0px;
    background-color: white;
    box-shadow: 0px 10px 20px rgba(31, 32, 65, 0.05);
    z-index: 1;
    box-sizing: border-box;
    margin: 0px auto; 
    &__nav{
        display: flex;
        list-style-type: none;
        font-family: 'Montserrat-Thin', sans-serif;
        &__item1{
            display: flex;
            position: absolute;
            width: 42px;
            height: 18px;
            left: 531px;
            top: 26px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 17px;
            color: rgba(31, 32, 65, 0.5);
        }
        &__item2{
            position: absolute;
            width: 50px;
            height: 18px;
            left: 593px;
            top: 26px;
            font-family: 'Montserrat-Thin', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 17px;
            color: rgba(31, 32, 65, 0.5);
        }
        &__item3{
            position: absolute;
            width: 24px;
            height: 21px;
            left: 643px;
            top: 26px;
        }
        &__item4{
            position: absolute;
            width: 72px;
            height: 18px;
            left: 687px;
            top: 26px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 17px;
            color: rgba(31, 32, 65, 0.5);
        }
        &__item5{
            position: absolute;
            width: 62px;
            height: 18px;
            left: 779px;
            top: 26px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 17px;
            color: rgba(31, 32, 65, 0.5);
        }
        &__item6{
            position: absolute;
            width: 92px;
            height: 18px;
            left: 861px;
            top: 26px;
            font-family: 'Montserrat-Thin', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 17px;
            color: rgba(31, 32, 65, 0.5);
        }
        &__item7{
            position: absolute;
            width: 24px;
            height: 21px;
            left: 953px;
            top: 26px;
        }
    }
    &__nav>li>a{
        text-decoration: none;
    }
    &__logo{
        display:flex;
        &__img1{
            position: absolute;
            width: 40px;
            height: 40px;
            left: 140px;
            top: 15px;
        }
        &__img2{
            position: absolute;
            width: 11.76px;
            height: 11.76px;
            left: 149.41px;
            top: 30.29px;
        }
        &__img3{
            position: absolute;
            width: 9.12px;
            height: 5.91px;
            left: 161.47px;
            top: 30.29px;
        }
        &__name{
            position: absolute;
            width: 53.19px;
            height: 12.95px;
            left: 192.5px;
            top: 28.33px;
        }
    }
    &__logIN{
        display:flex;
        &__registration__enter{
            position: absolute;
            width: 196px;
            height: 34px;
            left: 1104px;
            top: 18px;
            font-weight: bold;
            font-size: 12px;
            line-height: 15px;
            text-transform: uppercase;
            color: #FFFFFF;
            background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
            border-radius: 22px;
            border-color:#BC9CFF;
            border-style:solid;
        }
        &__signUP__enter{
            position: absolute;
            width: 87px;
            height: 34px;
            left: 997px;
            top: 18px;
            font-size: 12px;
            font-weight: bold;
            line-height: 15px;
            text-transform: uppercase;
            color: #BC9CFF;
            border-radius: 22px;
            border-color:#BC9CFF;
            background-color: white;
            border-radius: 22px;
            border-style:solid;
        }
    }
}
.main{
    &__cat{
        position: absolute;
        width: 380px;
        height: 374px;
        left: 140px;
        top: 140px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        z-index: 2;
        border:0;
    }
    &__image{
        position: absolute;
        z-index: 0;
    }
    &__text{
        position: absolute;
        width: 297px;
        height: 48px;
        left: 1009px;
        top: 834px;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        text-align: right;  
        color: rgba(31, 32, 65, 0.75);
        z-index: 3;
        }
    }

    .media{
        position: absolute;
        width: 1440px;
        height: 372px;
        left: 0px;
        top: 900px;
        background: #FFFFFF;
        box-shadow: 0px 1px 0px rgba(31, 32, 65, 0.1);
        &__footlogo{
            display:flex;
            &__img1{
                position: absolute;
    width: 40px;
    height: 40px;
    left: 140px;
    top: 1000px;
    
                }
            &__img2{
                position: absolute;
    width: 11.76px;
    height: 11.76px;
    left: 149.41px;
    top: 1015.29px;
            }
            &__img3{
                position: absolute;
    width: 9.12px;
    height: 5.91px;
    left: 161.47px;
    top: 1015.29px;
                }
            &__name{
                position: absolute;
    width: 53.19px;
    height: 12.95px;
    left: 192.5px;
    top: 1013.33px;
                }
            }
        &__text{
            position: absolute;
            width: 260px;
            height: 72px;
            left: 140px;
            top: 1060px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 24px;
            color: rgba(31, 32, 65, 0.75);
            }
        }
.footer{
    position: absolute;
width: 1440px;
height: 70px;
left: 0px;
top: 1273px;

background: #FFFFFF;
box-shadow: 0px 10px 20px rgba(31, 32, 65, 0.05);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toxin</title>
    <link rel="stylesheet" href="Montserrat-Thin/fonts/Montserrat-Thin.svg">
    <link rel="stylesheet" href="Montserrat-Thin/fonts/Montserrat-Thin.ttf">
    <link rel="stylesheet" href="Montserrat-Thin/fonts/Montserrat-Thin.woff">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <header class="header">
       <div class="header__logo">
           <div class="header__logo__img">
                <img class="header__logo__img1" src="img/Vector.svg" alt="">
                <img class="header__logo__img2" src="img/Vector2.svg" alt="">
                <img class="header__logo__img3" src="img/Vector3.svg" alt="">
           </div>
        <div class="header__logo__name">
            <img src="img/TOXIN.svg" alt="">
        </div>
        </div>
       <nav>
           <ul class="header__nav">
               <li class="header__nav__item1"><a href="">О нас</a></li>
               <li class="header__nav__item2"><a href="">Услуги</a></li>
               <li class="header__nav__item3"><a href=""><img src="img/expand_more.svg" alt=""></a></li>
               <li class="header__nav__item4"><a href="">Вакансии</a></li>
               <li class="header__nav__item5"><a href="">Новости</a></li>
               <li class="header__nav__item6"><a href="">Соглашения</a></li>
               <li class="header__nav__item7"><a href=""><img src="img/expand_more.svg" alt=""></a></li>
           </ul>
       </nav>
       <div class="header__logIN">
        <div class="header__logIN__signUp">
            <button class="header__logIN__signUP__enter">Войти</button>
        </div>
        <div class="header__logIN__registration">
            <button class="header__logIN__registration__enter">Зарегистрироваться</button>
        </div>
       </div>
   </header>
   <main class="main">
       <div><img class="main__image" src="/img/image.svg" alt=""></div>
       <div><img class="main__cat" src="img/kat.jpg" alt=""></div>
       <div class="main__text">Лучшие номера для вашей работы, отдыха и просто вдохновения</div>
   </main>
   <div class="media">
       <div class="media__footlogo">
        <div class="media__footlogo__img">
            <img class="media__footlogo__img1" src="img/Vector.svg" alt="">
            <img class="media__footlogo__img2" src="img/Vector2.svg" alt="">
            <img class="media__footlogo__img3" src="img/Vector3.svg" alt="">
       </div>
       <div class="media__footlogo__name">
        <img src="img/TOXIN.svg" alt="">
       </div>
       </div>
       <div>
           <h1 class="media__text">Бронирование номеров в лучшем отеле 2019 года по версии ассоциации «Отельные взгляды»</h1>
       </div>
   </div>
<div class="footer"><h1>r</h1></div>

</body>
</html>


Источник

Ответы (1 шт):

Автор решения: hamedoriy

У вас все элементы абсолютно позиционированы. отцентрировать их можно:

     {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width:100px;
}

Обязательно явно указать ширину

→ Ссылка

licensed under cc by-sa 3.0 with attribution.