How can i solve align mistakes? : Here i have a my website, in the specific this is the user page. 
Now, the problem is that the header elements and other, are not align in the same row. Here is what i mean: https://www.dropbox.com/s/oigfuevo9thf8cn/Immagine.png?dl=0

how can i solve? here is the html and css code: 

html:
   

    <?php
    session_start();
    if(!isset($_SESSION['user'])){
	header('Location: TESlogin.php');
    }
	else{
    ?>

    <!DOCTYPE html>
    <html>
    <head>
	<title>myTES</title>
	<link href="myTES_style.css" rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="tes-ico(1).ico" />
    </head>
    <body>

     <div id="mySidenav" class="sidenav">
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">& times;</a>
     <a href="#">Home</a>
     <a href="#">I miei consumi</a>
     <a href="#">Il mio conto</a><br>
     <a href="logout.php">Esci</a>
    </div>


    <div id = "main">
    <div class="header">
    <p id = "p1">My<b>TES</b></p>
     &nbsp; &nbsp; <p id = "p-left" ><span style="font-size:20px;   cursor:pointer;" onclick="openNav()">&#9776; </span></p>
     </div>


       <div id="pmain">
       &nbsp; &nbsp; Ciao <b><?= $_SESSION['nome'] ?></b> 
   	   &nbsp; <i class="right"></i>
       </div>
								<hr>
       <p align = "center"> il mio abbonamento &nbsp; <i class="down"></i></p>
 								<hr>



       </div>

      <!----- script in javascript per effetto comparsa laterale menu ----->
      <script>
     function openNav() {
     document.getElementById("mySidenav").style.width = "250px";
     document.getElementById("main").style.marginLeft = "250px";
     }

    function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    }
    </script>

    </body>
    </html>

     <?php
     }
     ?>

CSS: 

    @font-face{
     src: url(font/Montserrat-ExtraLight.ttf);
     font-family: montserratblack;
     }


      html, body{
      display: inline-block;     /* Serve a far collassare i magini dei                                                   contenuti adiacenti ai limiti del body, i quali influirebbero altrimenti             sullo stesso body */
       position: relative;        /* Blocca il riferimento dei contenuti con                position absolute anche durante lo scroll della pagina */
         width: 100%;               /* Con inline-block la larghezza è      relativa ai contenuti, quindi è necessario estenderla per l'intera larghezza della finestra */
          min-height: 100%;          /* Estende l'altezza del body per tutta la finestra anche se ci sono pochi contenuti, evitando che in tal caso il     .footer si porti in mezzo alla pagina */
        margin: 0;                 /* Rimuove i margini di default per ottenere un corretto dimensionamento */
        padding: 0;
        font-family: montserratblack;
        font-size: 20px;
        }

       .header{ 
       width: 100%;
       background-color: grey;
       overflow: hidden;
       }


        #pmain{
        display: inline-block;
        }

        #p-left{
    	float: left;
    	display: inline;
    	margin: 0 0 0 20px;
        }


       #p1{
       text-align: center;
       color: white;
       font-size: 20px;
      }

     #p2{

       float: right;
     }


    i {
     border: solid black;
     border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
     }

    .down {
      transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     }

      /* barra a comparsa dal lato sinistro */
        .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        }

      .sidenav a {
       padding: 8px 8px 8px 32px;
       text-decoration: none;
       font-size: 25px;
       color: #818181;
       display: block;
       transition: 0.3s;
       }

     .sidenav a:hover {
        color: #f1f1f1;
      }

     .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
     margin-left: 50px;
    }

    #main {
    transition: margin-left .5s;
    /*padding: 16px;*/
    }

     @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
      }

i try in every way, but nothing. What can i do? thanks.