БЛОГ НА HUSL


Появляется отступ справа при уменьшении ширины сайта. Как убрать?

Автор вопроса: 0n_time

На ширине 850px отступа еще нет, но после уже появляется.

Прилагаю фото: введите сюда описание изображения

body {
    margin: 0;
    background-color: black;
}

#start {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 300px;
}

#main_img {
    width: 800px;
    margin-top: 20px;
}

#title {
    text-align: center;
    flex-grow: 1;
}

h1 {
    color: black;
    font-size: 70px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-bottom: 0;
    color: chocolate;
}

#org_title {
    margin-top: 0;
    font-size: xx-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: chocolate;
}

#navigation {
    display: flex;
    justify-content: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    flex-basis: 300px;
    height: 300px;
    margin-top: 150px;
    margin-right: 250px;
    background-color: chocolate;
    border: 5px double black;
    border-radius: 10px;
}

@media (max-width: 1360px) {
    #navigation {
        margin-right: 0px;
    }
}

@media (max-width: 960px) {
    #main_img {
        width: 700px;
    }
}

@media (max-width: 850px) {
    header {

    }
}

a {
    color: black;
    display: block;
    list-style-type: none;
    padding-bottom: 15px;
    font-size: larger;
}

.characters {
    font-size: 20px;

}

main {
    position: relative;
}

#Rintaro_Okabe {
    width: 800px;
    margin: 100px 0px 200px 50px;
}

#Kurisu_Makise {
    position: absolute;
    right: 5px;
    text-align: end;
    width: 800px;
    margin: 0px 50px 200px 50px;
}

#Itaru_Hasida {
    width: 800px;
    margin: 1000px 0px 200px 50px;
}

#Mayuri_Sina {
    position: absolute;
    right: 5px;
    text-align: end;
    width: 800px;
    margin: 0px 50px 200px 50px;
}

.name {
    color: chocolate;
    font-size: 35px;
}

.description {
    color: chocolate;
    font-family: 'Courier New', Courier, monospace;
}

.description_img {
    width: 600px;
    border: 4px solid chocolate;
    border-radius: 15px;
}

footer {
    /* display: flex; */
    margin-top: 1200px;
}

#last_img {
    display: block;
    margin: 0 auto;
}

#begin {
    display: block;
    text-align: center;
    font-size: xx-large;
    font-family: 'Courier New', Courier, monospace;
    flex-basis: 100%;
    color: chocolate;
}
<body>
    <header id="start">
        <div id="title">
            <h1>Врата Штейна</h1>
            <p id="org_title">Steins Gate</p>
            <img id="main_img" src="assets/6627453519.jpg" alt="">
        </div>
        <div id="navigation">
            <div id="main_characters">
                <h2 class="characters">Главные герои</h2>
                <a href="#Rintaro_Okabe">Ринтаро Окабэ</a>
                <a href="#Kurisu_Makise">Курису Макисэ</a>
                <a href="#Itaru_Hasida">Итару Хасида</a>
                <a href="#Mayuri_Sina">Маюри Сина</a>
            </div>
        </div>
    </header>
    <main>
        <article id="Rintaro_Okabe">
            <h2 class="name">Ринтаро Окабэ</h2>
            <img class="description_img" src="assets/210c8eb139f3a3fe731b13689dba8f92f71b1d08r1-768-512v2_hq.jpg"
                alt="Rintaro_Okabe">
            <p class="description">Восемнадцатилетний студент первого курса Токийского электротехнического университета,
                но
                уже ощущает себя не
                только гениальным, но и, как это принято у гениев, — сумасшедшим учёным. Доказывает это он рассказами о
                таинственной «организации», которая неусыпно следит за студентом. Основатель «Лаборатории гаджетов
                будущего».
                Любит поговорить по телефону сам с собой и посмеяться как настоящий безумец. Его не всегда устраивает
                собственное имя, и он зовёт себя Кёма Хооин (яп. 鳳凰院 凶真), что можно перевести как «Феникс жестокой
                реальности». А вот его подруга детства Маюри (позже к ней присоединяется Дару) называет гения «Окарин»,
                просто соединив первые буквы его имени и фамилии. Практически не выходит из своей «Лаборатории гаджетов
                будущего», поэтому его легко издалека узнать по белому лабораторному халату.</p>
        </article>
        <article id="Kurisu_Makise">
            <h2 class="name">Курису Макисэ</h2>
            <img class="description_img" src="assets/sganime4.png" alt="Kurisu Makise">
            <p class="description">Член «Лаборатории гаджетов будущего» № 004. Возраст — 18 лет. Талантливая
                исследовательница неврологии в американском университете. Когда ей было 17 лет, её исследование было
                опубликовано во всемирно-известном журнале «Science» (в аниме название заменено на «Sciency»). Окабэ
                часто
                называет её ассистентом или придуманным им прозвищем — Кристина (саму Курису это очень раздражает). На
                первый взгляд — спокойная девушка, краснеет, если кто-то незнакомый приближается к ней слишком близко,
                но в
                душе — полная противоположность: однажды заставила Окарина стоять на коленях три часа подряд, при этом
                грозясь ударить его книгой. Всегда стоит на своём, не любит проигрывать и не любит, когда кто-то
                пытается
                управлять ею.
            </p>
        </article>
        <article id="Itaru_Hasida">
            <h2 class="name">Итару Хасида</h2>
            <img class="description_img"
                src="assets/1988447_Portuguese(Brazil)_KeyArt-OfficialVideoImage_43e1e196-dab3-4e33-a1c1-028ec416d2c5.jpg"
                alt="Itaru Hasida">
            <p class="description">Известный под прозвищем друзей Дару — девятнадцатилетний подросток, который учится на
                первом курсе Токийского электротехнического университета. Также является членом «Лаборатории гаджетов
                будущего», занесённый в список под номером «003», где его «специализация» — хакерские взломы. Ведь,
                несмотря
                на юный возраст, Дару отлично разбирается и в программном, и в аппаратном обеспечениях компьютера. Но
                эти
                умения никак не помогают ему в личной жизни. Неуверенный в себе с излишним весом, Дару просто боится
                людей и
                общается только с помощью компьютера. Для моральной поддержки выбрал культуру отаку. Дару не социопат и
                не
                опасен для общества. Он самостоятельно выбирает нетрадиционный образ жизни вне активного взаимодействия
                с
                другими людьми. Он сам навешивает на себя ярлык отаку. Это юношеский протест и своеобразный вызов, за
                которым на самом деле кроется ранимое сердце. И если бы нашёлся неравнодушный человек, он бы смог
                расшевелить Дару, выведя его из берлоги в люди.</p>
        </article>
        <article id="Mayuri_Sina">
            <h2 class="name">Маюри Сина</h2>
            <img class="description_img" src="assets/scale_1200.png" alt="Mayuri Sina">
            <p class="description">Девушка, в свои шестнадцать лет ставшая членом «Лаборатории гаджетов будущего» под
                номером «002», сразу за её главой. А всё потому, что она неизменная подруга детства Ринтаро, и за это
                имеет
                право называть его лично придуманным именем «Окарин». Себя же называет «Маюси». Немного легкомысленна,
                что
                может быть следствием её увлечения — косплея, для которого она любит придумывать и шить разнообразные
                костюмы. Кроме того, Ринтаро про себя шутливо удивляется: «Похоже, у неё действительно ветер в голове».
                Но,
                по его же словам, несмотря на всю её несерьёзность и глуповатость, Маюри способна, как никто другой,
                подбодрить и будет рядом, если тебе это нужно. Не сидит ни у кого на шее, самостоятельно подрабатывает в
                мэйд-кафе, где официантки наряжены в костюмы горничных.</p>
        </article>
    </main>
    <footer>
        <img id="last_img" src="assets/1572868653_DimCoordinatedBeagle-mobile.gif" alt="logo">
        <a id="begin" href="#start">Начало</a>
    </footer>
</body>

P.S. Готов принять любые наставления на мои ошибки, так как только новичек в верстке


Источник

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

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

отступы появляются из за этих блоков

    #Rintaro_Okabe {
        width: 800px;
        margin: 100px 0px 200px 50px;
    }
    
    #Kurisu_Makise {
        position: absolute;
        right: 5px;
        text-align: end;
        width: 800px;
        margin: 0px 50px 200px 50px;
    }
    
    #Itaru_Hasida {
        width: 800px;
        margin: 1000px 0px 200px 50px;
    }
    
    #Mayuri_Sina {
        position: absolute;
        right: 5px;
        text-align: end;
        width: 800px;
        margin: 0px 50px 200px 50px;
    }

они по 800px + margin вот и выпирает

если хотите кого то адаптива, то можете для них использовать запись по проще

#Rintaro_Okabe, #Itaru_Hasida {display: flex;
width: 80%;
flex-direction: column;
margin: auto;
align-items: flex-end;/*для размещения справа*/
}
#Kurisu_Makise, #Mayuri_Sina{display: flex;
width: 80%;
flex-direction: column;
margin: auto;
align-items: flex-start;/*для размещения слева*/}

и не нужно будет мучаться с ширинами блоков и отступами

→ Ссылка

licensed under cc by-sa 3.0 with attribution.