Untitled

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Serious</title>
        <style>
                        body{
            margin:  0 ;
            padding: 0 ;
            }

            header li{
            float:left;
            display:inline;
            padding: 0 20px 0 20px;
            }
            header #marque{
            position: relative;
            left: 40px;
            float:left;
            }

            header #marque h1{
            margin:0;
            }
            header nav{
            position: relative;
            /* right: 50px;  */
            float:right;
            /* margin-top:10px; */
            }
            header{
                height: auto;
                padding:10px;

            }
            header:after {
            content: ""; /* Important, sinon l'élément n'est pas généré. */
            display: table;
            clear: both;
            }
            .conteneur{
            padding-right: 15px;
            padding-left: 15px;
            width: 100%;

            }
        </style>
    </head>
    <body>
        <header  style="background-color: blue;">
            <div class="conteneur">
                <div id="marque">
                    <h1>Le monde <span>Scientifique</span></h1>
                </div>
                <nav>
                    <ul>
                        <li>Acceuil</li>
                        <li>Sommaire</li>
                        <li>BlaBla</li>
                        <li>Blabla2</li>
                    </ul>
                </nav>
            </div>
        </header>

        <!--Page begins -->

        <div id="bloc_page">

        </div>

    </body>
    </html>