Report

Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
<header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
Дополнение: тегу nav в стилях задан width: 100%.
Вопрос:
1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
2. Почему margin'ы работают не так как я ожидаю?)
Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
Спасибо за ответы.
 

Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
 
Вот: макет:
Мой сайт
 

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
Для второго элемента указано свойство:
padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),
если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.
Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.
В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.
В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...
Каким образом приручить эти элементы?
 

Здравствуйте,  я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
Ниже HTML и CSS код:
<header>
            <div class="header">
                <div class="wrap">
                    <div class="logo header_left">
                        <a href="#">
                            <img src="images/logo.png" alt="Логотип">
                        </a>
                    </div>
                    <div class="header_right">
                        <div id="topmenu">
                            <p>
                                <a href="#">About</a>
                                <span>/</span>
                                <a href="#">Blog</a>
                                <span>/</span>
                                <a href="#">Contact</a>
                                <span>/</span>
                            </p>
                        </div>
                        <div id="social">
                            <a class="twitter" href="#"></a>
                            <a class="vimeo" href="#"></a>
                            <a class="facebook" href="#"></a>
                            <a class="instagram" href="#"></a>
                            <a class="dribbble" href="#"></a>
                            <a class="reddit" href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
——————————————————————————————————————————————————--
#container {
    margin: 0 auto;
}
#container .header {
    border-bottom: 1px solid #bfbfbf;
    box-shadow: 0 0 3px #dbdbdb;
    padding-top: 6px;
}
#container .header .wrap {
    display: flex;
    justify-content: space-between;
    padding: 0;
}
@media (max-width: 650px) {
    .header .wrap {
        flex-direction: column;
        padding: 0 3px;
        margin-bottom: 5px;
    }
    
    .header #socials {
        margin-left: 5px;
    }
    
    .header #socials a:last-child {
        margin-right: 2px;;
    }
}
#container .header .header_left {
    align-self: center;
}
#container .header .header_right {
    display: flex;
    justify-content: space-between;
}
#container #topmenu {
    color: #8e8e8e;
    padding-top: 6px;
}
#container #topmenu a {
    color: #8e8e8e;
    text-decoration: none;
}
#container #topmenu a:hover {
    color: #dd5555;
}
#container #social {
    display: flex;
    margin-left: 20px;
    margin-right: 50px; 
}
#social a {
    margin-top: 9px;
    margin: 8px  10px;
    
}
.twitter {
    background: url("../images/twitter_un.png") no-repeat;
    height: 11px;
    width: 13px;
    cursor: pointer;
}
.twitter:hover {
    background: url("../images/twitter.png") no-repeat;
    height: 11px;
    width: 13px;
} 
.dribbble {
    background: url("../images/dribbble_un.png") no-repeat;
    height: 13px;
    width: 13px;
    cursor: pointer;
} 
.dribbble:hover {
    background: url("../images/dribbble.png") no-repeat;
    height: 13px;
    width: 13px;
} 
.vimeo {
    background: url("../images/vimeo_un.png") no-repeat;
    height: 12px;
    width: 13px;
    cursor: pointer;
} 
.vimeo:hover {
    background: url("../images/vimeo.png") no-repeat;
    height: 12px;
    width: 13px;
} 
.facebook {
    background: url("../images/facebook_un.png") no-repeat;
    height: 13px;
    width: 7px;
    cursor: pointer;
} 
.facebook:hover {
    background: url("../images/facebook.png") no-repeat;
    height: 13px;
    width: 7px;
} 
.instagram {
    background: url("../images/instagram_un.png") no-repeat;
    height: 12px;
    width: 12px;
    cursor: pointer;
} 
.instagram:hover {
    background: url("../images/instagram.png") no-repeat;
    height: 12px;
    width: 12px;
} 
.reddit {
    background: url("../images/reddit_un.png") no-repeat;
    height: 11px;
    width: 13px;
    cursor: pointer;
} 
.reddit:hover {
    background: url("../images/reddit.png") no-repeat;
    height: 11px;
    width: 13px;
} 

В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.