Почему не раскрывается адаптивное меню бургер?

Спасибо. Подключил - теперь на сайте появилось раскрытое меню (сразу при загрузке) и не убирается. Где еще ошибка? (

Как правильно делать ширину кнопки: в % или px?

Спасибо большое за такой развернутый ответ. Хотел уточнить про последний пример кода, где приводятся стили в px. Это вы указали пример того, что если указывать размер в rem, то потом не придется прописывать для разных разрешений экрана через media другие размеры шрифта? Правильно я вас понял?

Как правильно делать ширину кнопки: в % или px?

Подскажите пжлст, а размер шрифта лучше задавать в em? Или можно в px и разницы особой нет?

Как правильно делать ширину кнопки: в % или px?

Точно! Спасибо! :)

Как увеличить размер фонового изображения?

Спасибо!

Как правильно сделать резиновый сайт (не работает max-width )?

Сделал, но изображение не центрируется, а увеличивается в размере на всю высоту. Как быть тогда? Правильно, вообще, я задал изображение фоном или надо было в html через тег img делать это изображение?

Сейчас код:

.main-container {
       box-sizing: border-box;
       background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
	background-size: contain;			
	background-repeat: no-repeat;
	background-position: right center;
  
        height: 100%;
        display: flex;
	flex-direction: column;
	justify-content: center;
}

Как увеличить размер фонового изображения?

Спасибо огромное! Теперь разобрался. С Наступающим!! )

А как сделать так, чтобы по высоте контент центрировался и тянулся при изменении разрешения экрана? Я просто хочу сделать эту часть (main-container) резиновой по высоте. height: 100% не работало. Сейчас задал для этого:

.header {
	position: relative;
	<b>height: 100vh; </b>

Блок стал тянуться, но контент (текст и изображение в .main_left и .main_right) по вертикали не центрируются. Как правильно сделать, чтобы по центру было? Задавать margin-top в пикселях не хочется, тк не очень адаптивно получается.

Также пробовал через

.main-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;

Но тоже не работало...

Как будет правильно сделать центрирование?

Как правильно сделать резиновый сайт (не работает max-width )?

Спасибо! С Наступающим!

1. Разобрался с шириной.

2. С высотой остался вопрос. Сделал
.header {height: 100vh;}

и для центровки контента прописал

.main-container {  
        display: flex;
	flex-direction: column;
	justify-content: center; 
}

В итоге блок растянулся по высоте, но контент в нем не центруется по вертикали. При этом я убрал фиксированный маргин-топ у дива, чтобы не привязываться к пикселям. Что надо сделать, чтобы контент был по центру экрана по вертикали при любом разрешении?

3. По поводу флекс - спасибо. Полезно. Хотел уточнить - как делать расстояние между блоками сайта (то есть между экранами). В моем примере между header и how_works. Как эти расстояние задавать? Делать фиксированный маргин сверху: 200 пх (например) у второго блока (how_works), если я хочу увеличить расстояние? Или это по другому лучше делать?

Обновил код

Как увеличить размер фонового изображения?

вы имеете в виду, задать высоту в пикселях? Например так:

.main-container {
     height: 800px
}

А правильно будет задавать фиксированную высоту? с точки зрения мобильной адаптивности. Я только учусь, извиняюсь за нубские вопросы. Хочется сделать правильно с точки зрения логики.

Как увеличить размер фонового изображения?

Удалил, но изображение не стало больше. Только отступы пропали.

Я сделал также отдельный див под изображение: class="main_right right-block".
Но если прописываю фон туда, то изображение вообще не появляется (

.main_right {
  background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
	background-size: contain;			
	background-repeat: no-repeat;
	background-position: right center;
}

Подскажи пжлст, как надо сделать правильно, чтобы изображение стало больше.

Как правильно расположить лого, навигацию и кнопку в горизонтальном меню?

Максим Ленский, да! Супер! Огонь! Спасибо большое :)

Как правильно расположить лого, навигацию и кнопку в горизонтальном меню?

Взял ваше решение за основу. Возник новый вопрос :)
Как выравнять логотип по левому краю (при space-around он слева оставляет свободное пространство), а между элементами меню и кнопкой сделать равномерные пропуски?
То есть, как прижать логотип к левому краю, оставив саму навигацию и кнопку на месте, как сейчас?
Пробую прижать влево с помощью значения flex-start и сделать равномерные отступы между логотипом и остальным меню с помощью margin-left: auto у элементов меню. Но почему-то не работает.

https://codepen.io/a007mr/pen/roGZKR

Что не так делаю?

Как правильно расположить лого, навигацию и кнопку в горизонтальном меню?

Спасибо! А без флексбоксов, флоатов или гридов никак не решить?

Как правильно расположить лого, навигацию и кнопку в горизонтальном меню?

Спасибо! А без флексбоксов, флоатов или гридов никак не решить?

Как правильно сделать отступ в футере для блока с иконками?

Спасибо большое за ответ. Разобрался.

Как правильно сделать отступ в футере для блока с иконками?

Спасибо большое за ответ. Разобрался.

Как изменить цвет кнопки в CSS, если даже !important не помогает?

Спасибо огромное! Очень круто и подробно все объяснили. Разобрался :)

Как изменить цвет кнопки в CSS, если даже !important не помогает?

Неправильно скопировал селектор в теме вопроса. На самом деле прописал ".btn". Вот песочница https://codepen.io/a007mr/pen/MzBWdE.