Estilos en el header responsivo

A todos/as:agradesco de antemano me ayudarían en esto que estoy bastante confundido.

Esto es lo que tengo de html

<header>
    <h1>HYPNOSIS AND DELTOX</h1> 
           <nav  id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                   <li><a href="contact.html">Contact</a></li>
                </br></br></br>
             </nav>
           </ul>
</header> 
      <figure>
         <img src="foto.jpg">
        </figure> 

Ahora viene el css 3

header {
    background: #22282e;
    height:80px;
    position: relative;
    width: 100%;
}
header figure img{
    height: 180px;
    padding: 10px;
}
h1{
    color: #fff;
    font-size: 2.5em;
    margin-top: 5px;
    text-align: center;
}

primero quiero que sea responsive, fuera de eso el h1 no se me centra dentro del header queda muy arriba, le he dado margin y padding y nada...no se en que falle.