How can I remove space at the top of my HTML page?

I wanna give some space in the top though my css have margin:0 auto;

And this is the css :

* {
   margin:0 auto;
   padding:0;
   border:0;
   outline:0;
   vertical-align: baseline;
   background:#eee;
   overflow-x: hidden;
   }

   header {
   width:100vw;
   height:300px;
   background:red;
   }

Screenshot

Codepen: http://codepen.io/ciocigabi79/pen/NbXWRz

Solution

You had some unusual characters in your html, which were causing the issue. Just remove the first character from your codepen (the dots) and it'll work fine.

Indendation doesn't cause this problem, but if there are these invisible characters, they can cause various problems. I remember, I had a similar problem when my php API response looked good, but couldn't be parsed due to a similar character at the beginning of the response.

Here's your updated pen

http://codepen.io/anon/pen/PbEojQ

<html>
<head>
<meta charset="utf-8">
<title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/favicon.png">
    <script src="javascript.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><header></header>
</body>
</html>