Как определить вывод элемента в определенном месте

/*  * - означает примениния стиля для всех элементов в текущей странице*/
 
* {
    margin: 0; /* внешний отступ*/
    padding: 0; /* внутренний отступ*/
}
 
/*  Стили для ссылок*/
 
a {
    text-decoration: none; /* отключение стилизации ссылок*/
}
 
/* для списков*/
 
li {
    text-decoration: none;
    list-style: none;
}
 
/* list-style - Универсальное свойство, позволяющее одновременно 
    задать стиль маркера, его положение, 
    а также изображение, которое будет 
    использоваться в качестве маркера списка.*/
 
 
/* укажем семейство шрифтов, которое будет использовано в теле документа.
*/
body {
    font-family: Palatino, sans-serif; /* sans-serif - "рубленый" шрифт */
}
 
/*Название в заголовке*/
.headerName {
    font-family: Palatino;
    font-size: 30px;
    color: #ffffff;
    padding-top: 35px;
    padding-left: 25px;
}
 
.logo {
    background: #CCCCFF;
    width: 100%; /* то есть заполнение на всю ширину текущего разрешения экрана*/
    display: flex; /*Преобразует элемент в блочный flex-контейнер. 
        Все дочерние элементы данного контейнера автоматически 
        становятся flex-элементами. */
    justify-content: center; /*  justify-content указывает, 
        каким образом будут выравниваться 
        flex-элементы по горизонтали, 
        внутри flex-контейнера. */
}
 
 
/* display -  указывает тип элемента. 
    От типа элемента зависит то, как он будет 
    отображаться на веб-странице.*/
 
.graficlogo {
    margin-top: 15%;
    padding: 5px; /* внутренний отсуп от родительского блока*/
    max-width: 95%; /*Устанавливает максимальную ширину элемента. 
        Значение ширины элемента будет вычисляться в зависимости от 
        значений установленных свойств width, max-width и min-width.*/
    box-sizing: border-box; /* данное свойство изменяет алгоритм расчета 
        высоты и ширины элемента*/
    float: right; /*Выравнивает элемент по правому краю, а все остальные 
        элементы обтекают его по левой стороне.*/
}
 
/* эффект для логотипа, при наведении - выделяется другим цветом*/
.logo img:hover {
    background: #b6ff00;
    border-radius: 50%; /* убираем острые углы подсветки*/
}
 
 
/* стилизация тега nav*/
.topnav {
    margin: auto; /* Устанавливает величину отступа от каждого края элемента.
        auto - означает, что отступы автоматически рассчитываются браузером
    */
    width: 800px;
    height: 50px;
}
 
/* стилизация меню*/
.topnav {
    background-color: #ffffff; /* белый цвет*/
    font-size: 14px;
    margin-top: 40px; /* внешний отступ от верха*/
}
 
    /* стилизация ссылок меню*/
    .topnav a {
        color: #000000; /* черный цвет меню*/
        text-align: center; /* выравнивание по горизонтали, по центру, внутри родительского элемента*/
        padding: 14px 16px; /* внутренние оступы: 14px - сверху и снизу от содержимого, 
        16px - слева и справа от содержимого */
        font-size: 15px;
    }
 
        /* добавление эффектов для ссылок, используем псевдокласс :hover*/
 
        .topnav a:hover {
            border-bottom: 2px solid #000000; /*нижняя часть рамки, черного цвета*/
            width: 20%; /* уменьшим размер подчеркивающей линии для ссылки*/
        }
 
    .topnav .icon:hover {
        width: 1%;
    }
 
    .topnav .icon {
        display: none;
    }
 
 
/* адаптируем изображение*/
.media-width-100 {
    max-width: 100%;
}
 
.advantages-container {
    display: flex; /*   Преобразует элемент в блочный flex-контейнер. 
        Все дочерние элементы данного контейнера 
        автоматически становятся flex-элементами. */
    justify-content: center; /* выравнивание элементов 
        вдоль горизонтальной оси*/
}
 
.advantages {
    padding-top: 40px; /* отступ сверху*/
    padding-bottom: 40px; /*отступ снизу*/
    width: 70%; /* занимает 70% ширины родительского блока*/
    display: flex; /* размещаем в одну строку*/
    justify-content: space-between; /* выравнивание по горизонтальной оси,
        Флексы равномерно распределяются по всей строке. 
        Первый и последний элемент прижимаются к соответствующим 
        краям контейнера.
    */
    text-align: center; /* выравнивание текста по горизонтали, по центру*/
    flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
}
 
/* отдельный элемент списка 'преимуществ'*/
.advantages-items {
    width: 30%;
    padding: 20px 10px 10px 10px;
}
 
/* заголовки в блоках 'преимуществ'*/
 
.advantages .advantages-items h2 {
    font-family: "Comic Sans MS", cursive, sans-serif;
    padding-bottom: 5px;
}
 
/* параграфы в блоках 'преимуществ'*/
 
.advantages .advantages-items p {
    font-family: Palatino, cursive;
    font-size: 18px;
    text-indent: 20px; /* красная строка - отступ для первого слова абзаца*/
    text-align: left;
    padding-bottom: 15px;
    -webkit-hyphens: auto; /* автматический перенос слов*/
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}
 
/* иконки в блоках 'преимуществ'*/
.advantages-icons {
    padding-bottom: 10px;
    padding-top: 30px;
}
 
 
 
/* для экранов 1280 x 1024 пикселей*/
 
@media screen and (max-width: 1280px) {
    /*projects.thml*/
 
    /* для блока с изображением.*/
    .photo-itm {
        padding-top: 10px; /* отступ сверху*/
        padding-bottom: 10px; /*отступ снизу*/
        width: 100%; /* занимает 70% ширины родительского блока*/
        display: flex; /* размещаем в одну строку*/
        /* выравнивание по горизонтальной оси,
        Флексы равномерно распределяются по всей строке. 
        Первый и последний элемент прижимаются к соответствующим 
        краям контейнера.
    */
        justify-content: space-around;
        text-align: center; /* выравнивание текста по горизонтали, по центру*/
        flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
    }
 
        .photo-itm img {
            width: 95%;
        }
}
 
/* для экранов 1024 x 768 пикселей*/
@media screen and (max-width: 1024px) {
    /*projects.thml*/
 
    /* для блока с изображением.*/
    .photo-itm {
        padding-top: 10px; /* отступ сверху*/
        padding-bottom: 10px; /*отступ снизу*/
        width: 100%; /* занимает 70% ширины родительского блока*/
        display: flex; /* размещаем в одну строку*/
        /* выравнивание по горизонтальной оси,
        Флексы равномерно распределяются по всей строке. 
        Первый и последний элемент прижимаются к соответствующим 
        краям контейнера.
    */
        justify-content: space-around;
        text-align: center; /* выравнивание текста по горизонтали, по центру*/
        flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
    }
 
        .photo-itm img {
            width: 95%;
        }
}
 
 
 
/* Адаптация под экраны, шириной меньше чем  768px*/
@media screen and (max-width: 768px) {
 
    .topnav a:not(:first-child) {
        display: none; /* Временно удаляет элемент из документа.*/
    }
 
    /*для ссылки-графической_иконки*/
    .topnav a.icon {
        float: right; /* Выравнивает элемент по правому краю, 
           а все остальные элементы обтекают его по левой стороне.*/
        margin-top: -17px; /* вывести вернюю часть данной иконки, за внешнюю границу блока div*/
        display: block; /*определяется браузером как блочный элемент,
           имеет разрыв строки до и после элемента и 
           занимает всю доступную ширину*/
        color: black;
    }
 
    .topnav {
        width: 100%;
        /*высоту указывать не будем, так как 
            она наследуется nav, который мы определили выше.*/
    }
 
    /* .responsive - адаптивный*/
    .topnav.responsive {
        position: relative; /*Относительное позиционирование. 
            Положение элемента устанавливается относительно 
            его исходного места. Добавление свойств left, 
            top, right и bottom изменяет позицию элемента 
            и сдвигает его в ту или иную сторону 
            от первоначального расположения.*/
    }
 
        /* для ссылки-иконки(графической)*/
        .topnav.responsive a.icon {
            position: absolute; /*Абсолютное позиционирование. 
            Указывает, что элемент абсолютно позиционирован, 
            при этом другие элементы отображаются 
            на веб-странице словно 
            абсолютно позиционированного элемента и нет.
            Так как у родителя значение position задано как relative, 
            то отсчёт координат ведётся от края родительского элемента.
        */
            right: 0;
            top: 0;
        }
 
        /* адаптирование для всех ссылок*/
        .topnav.responsive a {
            float: none; /*Обтекание элемента не задаётся, для того, чтобы ссылки
            выстроились в колонку.
        */
            display: block; /*определяется браузером как блочный элемент,
           имеет разрыв строки до и после элемента и 
           занимает всю доступную ширину*/
            text-align: left; /* выравнивание по горизонтали по левому краю*/
        }
 
    /*логотип в header, отссуп сверху от внутреннего края*/
    .graficlogo {
        padding-top: 10px;
    }
 
    /* адаптация названия заголовка*/
    .headerName {
        font-size: 20px;
        padding-top: 10px;
        padding-left: 25px;
        margin-right: 15px;
    }
 
 
    /*правила для отдельного элемента списка 'преимуществ'*/
    .advantages-items {
        width: 45%;
    }
 
    /*projects.thml*/
 
    /* для блока с изображением.*/
    .photo-itm {
        margin-left: 85px;
        margin-bottom: 10px;
        display: flex; /* размещаем в одну строку*/
        /* выравнивание по горизонтальной оси,
        Флексы равномерно распределяются по всей строке. 
        Первый и последний элемент прижимаются к соответствующим 
        краям контейнера.
    */
        justify-content: space-between;
        text-align: center; /* выравнивание текста по горизонтали, по центру*/
        flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
    }
 
        .photo-itm img {
            width: 100%;
        }
}
 
/* Адаптация под экраны, шириной меньше чем  420px*/
@media screen and (max-width: 420px) {
    .advantages {
        flex-direction: column; /* задаем направление для размещения flex-элементов
            в колонку.
        */
    }
 
    .advantages-items {
        width: 100%; /*здесь указываем, что элемент блока 'преимуществ'
            в случае расположения в колонку, будет занимать 100% места
        */
    }
 
 
    /* уменьшим размер иконки(если добавить значение width, тогда
        изменение размера не пропорционально)
    */
    .advantages-icons {
        height: 30%;
    }
 
    .project {
        margin-left: 100px;
        display: flex;
        justify-content: center; /*выравнивает все элементы по центру
            Вдоль вертикальной оси*/
        align-items: center; /*выравнивает все элементы по центру
            Вдоль горизонтальной оси*/
    }
 
    .gallery {
        width: auto;
        margin: auto;
    }
 
    .photo-itm {
        padding: 5px 5px 5px 5px;
        width: 100%;
        margin: 0 auto; /*чтобы расположить по середине*/
    }
 
  .advantages .advantages-items p {
    padding-bottom: 65px;
}
 
    /* иконки в блоках 'преимуществ'*/
.advantages-icons {
   padding-top: 30px;
   padding-bottom: 10px;
}
 
}
 
footer {
    width: 100%;
    height: auto; /*высота footer будет автоматически 
        подстраиваться под высоту элементов, расположенных в footer*/
    background: #435ceb;
    margin: 0 auto; /* означает расположение элементов - посредине*/
    text-align: center; /*добавляется для совместимости с браузером IE,
        чтобы отцентровать блок, точно посредине, и в данном случае, используется
        совметстно с  -   margin: 0 auto;
    */
    padding-top: 25px; /*отступ для внутренних элементов 
        футера - сверху от внутреннего края */
}
 
    footer a {
        color: #b6ff00;
        font-size: 14px;
        margin-left: 15px; /* расстояние между ссылками*/
    }
 
    /* добавление для ссылок только меню*/
    footer nav a:hover {
        border-bottom: 1px solid white; /*нижняя часть рамки*/
    }
 
.social {
    text-align: end;
    margin-top: 10px;
}
 
    /* иконки соц.сетей в footer*/
    .social img {
        margin-left: 10px;
        margin-bottom: 10px;
    }
 
        /* hover-эффект для иконок*/
        .social img:hover {
            background: #ffd800; /*при наведении на иконку, иконка подкрашивается*/
            border-radius: 50%; /* убираем острые углы подсветки*/
        }
 
footer p {
    color: white;
}
 
/* Cтилизация для страницы projects*/
 
/* стилизация изображений*/
.gallery {
    width: 80%;
    margin: auto; /*размер отступов будет автоматически рассчитан браузером.*/
    display: flex; /*Преобразует элемент в блочный flex-контейнер. 
        Все дочерние элементы данного контейнера автоматически 
        становятся flex-элементами. */
    flex-wrap: wrap; /*Указывает, что flex-элементы при необходимости 
        могут переноситься на следующую строку, если на предыдущей 
        не хватает места.*/
    margin-bottom: 50px;
}
 
/* для каждого фото отдельно*/
.photo-itm {
    width: 25%;
}
 
    /* стилизация самого фото*/
 
    .photo-itm img {
        box-sizing: border-box; /*Применяется для изменения алгоритма расчёта ширины и высоты элемента.*/
        max-width: 100%; /* для адаптации картинок*/
        opacity: 0.5; /*opacity (в переводе с анг. - непрозрачность) 
        устанавливает уровень прозрачности элемента. 
        Прозрачность задаётся числом от 0 (полная прозрачность) 
        до 1 (полная непрозрачность).*/
    }
 
    /* hover-эффект для каждого фото*/
 
    .photo-itm:hover img {
        opacity: 1;
    }