Почему в браузерах может быть не корректное отображение.

Общее
1

Хотела создать для себя страничку с вкладками, но браузеры не корректно отображают информацию. По какой причине это может происходить? Может у меня слабый процессор, поэтому браузеры некорректно отображают.
Ставлю теги footer, main, он их не видит, в данном случае даже див что то не правильно отображается, нет отступа слева, я уже к маргину и паддинг подставила, тоже не видит, открыла ещё в нескольких браузерах, там вообще непонятно, хотя кодировка указана русская.

Screenshot_19
Screenshot_19.jpg1240×889 215 KB
Screenshot_20
Screenshot_20.jpg530×513 58.9 KB 

 <!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Проект</title>
    <meta http-rquiv="cjntent-type" content="text/html;charset-utf-8" />
    <link rel="stylesheet" href="CSS/style.css">
  </head>
  <body>
  	<div class="main"></div>
  	<h2>HTML академия.</h2>
  <ul>
  	<li>
  		<a target="_blanc" href="https://htmlacademy.ru/courses">Интерактивные курсы — HTML Academy</a>
  	</li>
  	<li>
  		<a target="_blanc" href="https://htmlacademy.ru/blog/useful/programming/editors-for-the-coders">обзор редакторов кода.</a>
  	</li>
  	<li>
  		<a target="_blanc" href="https://htmlacademy.ru/blog/useful">Разное.</a>
  	</li>
  	<li>
  		<a target="_blanc" href="https://htmlacademy.ru/demos/2#1">Использование псевдокласса :nth-child</a>
  	</li>
  	<li>
  		<a target="_blanc" href="http://forum.academy/"> Сообщество от академии.</a>
  	</li>
  	<li></li>
  </ul>

  </body>
  </html>
*{
	padding: 0;
	margin: 0;
	border: 0;
}

*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
h2{
	font-size: 24px;
	font-weight: 800;
}
.main{
	margin: 20px 20px 20px 20px;
	padding-left: 60px;
}
2

в мете жесть какая-то написана, должно быть вот так:

<meta charset="utf-8">

и тогда будет норм отображаться

3

Помогло, а что насчёт падингов и маргинов? Почему контейнер не сдвигается влево, а только вниз?

4

какой контейнер? .main? так он у вас пустой. в нем нет контента. да, я вижу в нем 2 маржина сверху и снизу по 20, т.е. получается заголовок отстоит от верхнего края на 40 пикселей.
вообще по-хорошему, сначала нормализуют паддинги и маржины с помощью этого, чтобы придать одинаковый вид во всех браузерах.

5

Ой, точно, вроде див ставила вниз, спасибо, смотрю и не пойму почему не срабатывают и кодировку списала неправильно, нужно было , с ней работает. Человек который работает фрилансером, пишет что эта более точно указывает кодировку.

эта кодировка мне нравиться больше, меньше вероятности сделать ошибку. Просто попробовала ту, как в том обучении и уже напророчила не то.
6

Спасибо большое!

7

нельзя кодировку указать “более” или “менее” точно. это атрибут. если работаете с обычными языками, то utf-8 практически всегда будет использоваться.
вам нужно самой понимать за каждый тег, за каждый атрибут, что вы пишете, а не списывать решение у других. если вы не можете пояснить за необходимость того или иного элемента в своем коде, то вам как специалисту грош цена. не используйте атрибуты, в которых не разобрались.
я даже не буду спрашивать для чего вам в учебном проекте использовать content-type и http-equiv. вы даже с ошибками их написали. также неверно написано значение атрибута у ссылок: _blank

1 лайк