making my header responsive/collision issues

[smallball]

Responsive header issue:

HI ALL. I’m having an issue with making my header responsive. I do have it the way I like more/less when non responsive. So here’s the problem.

I want my header to contain three items, an image to the left but not quite all the way to the left, a short paragraph just to the right of it that will stay just to the right of it no matter the size, and an h1 that will stay top and center even when shrunk. Everything I try(flex, media quarries, different positioning etc) always seem to collide with each other at some point. At wits end so any help appreciated.

The code:

                                           <div class="container">

                                                <div class="navbar">

                                                <img src="./images/1.jpg" class="logo">

                                    <div class="p"> Xxxx xxxxx xxxxxxx xx ? <div>

 

           <div class="h1"><h1>Xxxx xxxxxx xxxxxx</h1></div>

                                                             </div>

                                                            </div>

And the css

 .container {

                                                                                      position:absolute;

                                                                                     

                                                                                        width:100%;

                                                                                                height:100vn;

                                                                                                background-position:center;

                                                                                                background-size:cover;

                                                                                                background:#f3f3f3;

                                                                                               

                                                                        }

 

                                                           

                        .navbar{

                                    height:150px;

                                   

                                    align-items:center;

                                    flex-wrap:wrap;

                                    display:flex;

                       

                        }

 

 

                                    .logo{

                                                height:150px;

                                                width:150px;

                                                margin-left:200px;

                                                display:flex;

                                                position:relative;

                                    }                                                                                  

                                                                                               

                                    .p{

                                                border:1px solid red;

                                                font-size: 1.5em;

                                                padding-top:15px;

                                                margin-top:15px;

                                                display:flex;

                                    position:relative;

                                   

                                    }

                                                .h1{

                                                            border:1px solid red;

                                                font-size:2em;

                                                display:flex;

                                                position:relative;

                                                margin-top:15px;

                                    }