AlexZaw

Открываться то нечему, js у вас для дива с классом .menu добавляет класс menu_state_open, а в css не прописаны стили для этого класса

как то так я думаю: <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/ остается только меню поставить куда надо

Смотря какое выравнивание нужно, если горизонтальное можно воспользоваться margin:0 auto Если вертикальное то существуют разные способы, тут надо смотреть по ситуации. А уж что центрировать выбирать вам, но логичнее будет центрировать само изображение, чтобы потом не расставлять по местам остальные элементы в родительском блоке.

border-image конечно хорошо, но при таком радиусе углов это бордер в 50 пикселей получается, я думаю это мало где подойдет

возможно flexbox и nth-child вам поможет, хотя если бы был код помочь было бы проще

существует библиотека masonry. desandro.com но для этого нужно знать хотя бы основы JS

загвоздка в том что первая функция ничего не возвращает, добавьте строку return i;

я конечно плохо знаю JS, но мне кажется тут дело в чем то другом, т.к. если во втором примере в конце вывести main в консоль он содержит строку Hello, но body при том же выводе в консоль почему то содержит пустой main

если я правильно понял, то проблема вот здесь div.thermometers { margin: 20px auto; width: 560px; } div.thermometers .label { position: relative; float: left; width: 280px; text-align: center; font-size: 24px; font-family: 'Dosis'; font-weight: bold; } еще один блок просто не влазит по ширине в div .thermometers

можно и просто комментариями обойтись <div></div><!-- --><div></div>

это давно известная проблема инлайн блоков, в интернете много по этому поводу написано, где то их поведение подправили, где то нет, другие же отличия браузеров вас не удивляют, почему удивило это?

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

без псевдо элементов через label https://jsfiddle.net/AlexZaw/u8x02eLr/

body лежит в самом низу стека, ниже него ничего не может быть

да, лого в nav, nav задаем position: relative, а лого position:absolute; top:50%; left:50%; и отрицательный левый маржин на половину ширины лого

можно положить лого между списками и спозиционировать абсолютно относительно nav

оно по умолчанию не должно никуда съезжать, покажите css или сам сайт, то ли у вас бордер стоит вместо подчеркивания, то ли что...

можно сделать, например, так: .menu ul li{ color:red }

в личку не дает написать, но если так хочется то можно найти меня в вк https://vk.com/alexzaw

Ну я указал что лучше использовать файл для сброса стилей, хотя, на мой взгляд, все равно в них делают тоже самое только перечисляют элементы, а не применяют универсальный селектор, что плохого в обнулении отступов у тех элементов у которых их нет? Раз нет, значит ничего не обнулится

нужно сделать чтобы при нажатии на "узнать подробности" появлялся текст что-ли? тут делов то на 2 минуты, причем 1 минута на подготовку

как вариант <div class="wrapper"> <div class="header"> HEADER </div> <div class="content"> <button> START </button> </div> <div class="footer"> AUTHOR </div> </div> .wrapper{ height: 100%; position:absolute; top:0; left: 0; } .header { height: 30%; } .content { height: 60%; } .footer { heigth: 10%; } хотя для футера можно и не указывать высоту

слева и справа расстояние больше из-за отступов между инлайн блоками, между списками не пойму почему расстояние больше, почему то контент больше места занимает. удалось победить только с помощью line-height:0 варианты: таблица, flexbox https://jsfiddle.net/AlexZaw/25xy9t0p/

не у body обнуляем, а у всех элементов, ну или в данном конкретном случае у ul,затем в ul.stroka li { display:inline-block; border: 1px solid #000; width:50px; height:50px; background: #00FF21; } добавляем margin:5px

у элементов html есть свои паддинги и маржины по умолчанию, когда вы задаете свои размеры они добавляются к тем что есть по умолчанию, чтобы этого не происходило и делают сброс стилей