How to prevent image from jumbling with header content?

Hi ,
The tata mcgraw hill image on top of site gets jumbled up with header when i change the size of browser.
I am a newbie and have this problem at the place i am employed… Help would b appreciated

The tata mcgraw hill image and the text to its right are absolutely positioned; therefore, they are removed from the normal flow of the page and they are not aware of each other nor is anything else aware of them. Rewrite the head of your page without absolutely positioning these items (or any others unless absolutely needed).

.pic {
height: auto;
width: auto;
margin: 5px;
padding: 5px;
float: left;
text-align: center;
z-index: 10000;
position: absolute;
left: -20px;
top: -110px;
justify-content: flex-start;

This is the code in .css for a class called".pic" that i used for the tata mcgraw hill image… Should i remove "position " attribute from it ??

You should remove all position:absolutes from the header of hte page. Rewrite from there as Ron mentioned. Come back if you are stuck or are tempted to use position:absolute

But the other four menus on right viz.what we offer , courses, registration, log in are getting distorted

How do you mean they are getting distorted? Describe “distorted”, please.

I tried unchecking position: absolute from the “inspect element” option of the class logo-container and it brings the 4 menus down

Yes, remove all the position:absolute. We are removing the cancerous tumors from your code. We are doing chemotherapy. With any chemotherapy, we are gonna have to work our way back up to the beautiful masterpiece we were before. Go into your code and remove them and start over.

ok, will try