Error in browser css?

Today I had to make a mini website! I started to do but this problem was not yet
Don't understand what is the problem, Look at the screenshots
In the code everything is fine
But the browser problem! I watched using Chrome/Opera/Ffox always is
824475b56c554be9b57fd838e53e7e35.png
All of these elements must be in the head and in the code and is
But it in body
Css code
body {
 background: #fff;
 margin:0 auto;
 padding:0 0;
 font-size: 14px;
}
.container {
 background: #c9c9c9;
 color: #000;
 margin:0 auto;
padding:0;
}
header {
 background: #673AB7;
 padding:4px 16px;
 color: #fff;
 display: flex;
 flex-derection: row;
}

ff1af34684ee46fda829cbb9a4da2a9e.png6b4d346df2d74e22b9df5c53fcd20840.png
July 2nd 19 at 13:42
1 answer
July 2nd 19 at 13:44
Solution
Only CSS is not irrelevant. Look at what is generated in bare html (view-source). And notice in the inspector window. Revealing the invalid code (html entity at the head), the browser considers that this is a common block and makes it into body.

Use encoding without bom. Or clean code from the non-printable characters.
I'll switch to utf-8 without BOM - flo.Wisoky15 commented on July 2nd 19 at 13:47

Find more questions by tags PHPHTMLCSS