AlexZaw

Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css
т.е. структура выглядит примерно так:
. |   index.html |   style.css | \—fonts         Lato-Italic.ttf так ли это на самом деле?

Тут у вас происходит схлопывание margin-ов. Почитайте тут особенно про отмену схлопывания.

Либо использовать js, либо ждать когда будет поддерживаться CSS selectors level 4.
А вообще, повесьте hover на элементы <li> , а не <a>

Установить локальный веб сервер, например XAMPP

header ul li:last-child a { border-right: none; }  

Как вариант:
<div class="wrap"> Наука <div class="square"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat! </div> </div> </div> .square{ position: relative; border-left: 1px solid #000; } .square:before, .square:after{ content: ''; position: absolute; width: 100px; height: 1px; background: #000; left: 0; } .square:before{ top: 0; } .square:after{ bottom: 0; } .text{ position: relative; padding: 30px 0 30px 20px; } .text:before, .text:after{ content: ''; position: absolute; height: 20px; width: 1px; background: #000; left: 100px; } .text:before{ top: 0; } .text:after{ bottom: 0px; }  

Так фиксированно или может меняться?
IMHO, при заданных условиях это невозможно. 

<div class="var1"></div> <div class="var2"></div> <div class="var3"></div> .var1{ position: relative; height: 40px; width: 15px; display: inline-block; } .var1:after, .var1:before{ content: ''; display: block; background: #000; position: absolute; height: 2px; width: 23px; transform-origin: 0 50%; top: 50%; } .var1:before{ transform: rotate(-60deg); } .var1:after{ transform: rotate(60deg); } .var2{ display: inline-block; position: relative; height: 40px; width: 15px; overflow: hidden; } .var2:after{ position: absolute; top: 50%; content: ''; display: block; width: 40px; height: 40px; border: 2px solid #000; border-top: none; border-right: none; transform-origin: 0 100% ; transform: translateY(-100%) rotate(60deg) skew(30deg); } .var3{ display: inline-block; height: 22px; width: 20px; border: 2px solid #000; border-top: none; border-right: none; transform:rotate(30deg) skewY(30deg) }  

Пока отвлекался уже ответов надавали ?

.tabs-slider__title:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .tabs-slider__title { border: 1px solid #000; display: inline-block; width: 100%; height: 36px; margin-bottom: 16px; overflow: hidden; span { display: inline-block; vertical-align: middle; line-height: 18px; } }  

display забыли задать.
ну и background-color вместо color

Для центрального блока нужно использовать оба псевдоэлемента каждый из которых будет наклонен в свою сторону.
Но так как у вас :before использован то вам нужно либо поменять вашу разметку и вместо ваших :before использовать что то другое, либо для центрального блока сделать еще один дочерний и работать уже с его псевдоэлементами

Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае.
Заголовок занял 100% ширины, синие блоки без текста выровнялись нижним краем по базовой линии текста, тем самым отодвинув строку вниз (т.е. по сути они просто большие буквы). Желтый блок с текстом так же выровнялся относительно baseline.
Задайте для .block2  и .inner-block vertical-align:top;

Имеется ввиду следующее:
<div class="box"></div> .box{ width: 400px; height: 200px; border: 1px solid #000; border-top: none; position: relative; } .box:before{ display: block; content: ''; height: 1px; width: calc(50% - 40px); background: #000; position: absolute; top: 0; left: 0; } .box:after{ display: block; content: ''; height: 1px; width: calc(50% - 40px); background: #000; position: absolute; top: 0; right: 0; } И все-таки, чем не устраивает тег legend?

В теге ul должны быть только li, перенесите ссылки внутрь пунктов списка

Про градиент то на заднем фоне забыли.
Как один из вариантов решения:
<div class="wrap"> <fieldset class="rotate"> <legend> <div class="button rotate">button</div> </legend> <div class="box rotate"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni nihil magnam eum aspernatur at aperiam officiis nam aliquid inventore ab repudiandae laboriosam odio ad possimus cupiditate ut, voluptas numquam deserunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde earum voluptates magni quisquam natus neque ipsam ad similique autem illum facere architecto ut explicabo, numquam minus provident exercitationem. Numquam, in. </div> </fieldset> </div> body{ background: linear-gradient(to right top, #f00 0%, #0f0 25%, #00f 50%, #ff0 75%, #f0f 100%) no-repeat; } .wrap{ width: 500px; margin: 0 auto; } .rotate{ transform: rotate(180deg); } .button{ background: #ff0; width: 75%; margin: 0 auto; border-radius: 10px; } fieldset{ border-radius: 20px; border: 5px solid #fff } legend{ text-align: center; width: 150px; border: 1px solid transparent; box-sizing: border-box; }  

У вас картинка перекрывает ссылку поэтому вы не можете на нее нажать.

.bg:hover p { color: white; margin-top: 11px; }  

http://prntscr.com/hgeip0 вот ваш .wrapper (обведен желтым бордером) в хтмл у него заданы только размеры и бекграунд, содержимого у него нет, соответственно  изменение его размеров, с учетом того как у вас расположены остальные элементы, на  весь остальной сайт не влияет.  
http://prntscr.com/hgem2y а вот враппер при срабатывании медиа запроса
как видите запрос отрабатывает нормально, но сама верстка сделана неправильно, положите все остальные элементы внутрь wrapper-а, поправьте расположение элементов и все заработает

<div class="box"> <div class="inner"></div> <div class="circle"></div> </div> *{ box-sizing: border-box;} .box{ width: 300px; height: 300px; border: 1px solid grey; position: relative; margin-top: 100px; background-color: #fff; } .inner{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .inner:before{ content: ''; display: block; width: 100px; height: 100px; border-radius:50%; box-shadow: 0 0 0 11px grey; position: absolute; top: -50px; left: 50%; margin-left: -50px; } .circle{ width: 100px; height: 100px; border: 1px solid grey; border-radius:50%; position: absolute; top: -50px; left: 50%; margin-left: -50px; background-color: #fff; box-shadow: 0 0 0 10px #fff } тени добавить труда не составит я думаю

как то так я думаю:
<div class="container"> <div class="container_left"> <img src="https://placeholdit.co//i/100x50?" class="logo"> </div> <div class="container_right"> <span class="text">Menu</span> </div> .container{height: 100px;width: 100%;background-color: #f00; position: relative; } .container_left{width: 100px; position: absolute; top: 50%; left:50%; margin-top:-25px; margin-left:-50px} https://jsfiddle.net/AlexZaw/5cyza3fm/
остается только меню поставить куда надо

С сеткой или без зависит от дизайнера, вот дадут тебе макет без сетки и скажут сделать пиксель перфект, и тогда как не крути сетка не поможет.
Хотя вопрос конечно странный, чем принципиально верстка без сетки отличается от верстки с сеткой? Сетка всего лишь инструмент для более удобной верстки. Если она есть в макете - используй, если нет - провозишься подольше, но все-равно сверстаешь. Это не две разные профессии, а части одной, как у строителя например - либо он будет ломать стену кувалдой, либо возьмет перфоратор или отбойный молоток

черный блок при изменении марджинов изменяет размер body, а у красного задано абсолютное позиционирование, но не заданы координаты привязки, соответственно он выпадает из потока, но остается на своем месте, а так как размеры у body меняются - меняется и положение блока.
Если задать, например, top:10px; left:10px красному блоку, то он никуда не убежит

var table = new Array(10); //создаем массив с 10 элементами = undefined for(var i = 0; i < table.length; i++) //цикл для перебора массива table[i] = new Array(10); //в каждом элементе массива создаем массив с 10 элементами = undefined for(var row = 0, str = ''; row < table.length; row++) { //перебор массива table for(var col = 0; col < table[row].length; col++) { //перебор внутренних массивов table[row][col] = (row+1)*(col+1); //в каждый элемент внутреннего массива заносим вычесленные значения str += table[row][col] + ' '; // в str добавляем вычеленное значение и пробелы } console.log(str + '\n'); // выводим в консоль str и переносим строку str = ''; //очищаем str } вот как то так
больше времени ушло на попытку описать что тут делается чем на понимание кода