My Website Header Image Is Not Resizing On Mobile - css

Question

I am using blogger and has a custom template I added a header it works fine but the header is not resizing on mobile template
My site is https://untoldstoriesofpakistan.blogspot.com
I think this is my css for header
Header
div#navigation-wrapper {
width: 56%;
float: right;
}
#header {
width: 30%;
background-size: contain;
}
#logo {
text-align:center;
padding:0px 0;
height: 10px;
background-size: contain;
}
and this is my media css
#media only screen and (max-width: 767px) {
.container {
width:300px;
}
#navigation-wrapper {
display:none;
}
.slicknav_menu {
display:block;
}
#logo img {
max-width:300px;
height:auto;
}
.post-header h1 a, .post-header h2 a, .post-header h1 {
font-size:22px;
letter-spacing:2px;
}
.post-image img {
width:300px;
height:auto;
}
.post-image.audio iframe {
width:300px;
height:auto;
}
.item-related {
width:320px;
margin-bottom:30px;
}
.share-box {
width:46px;
height:36px;
line-height:36px;
margin:0 4px;
}
.post-pagination .prev-post {
width:300px;
}
.post-pagination .next-post {
width:300px;
}
#respond textarea {
width:90%;
}
.thecomment .author-img {
display:none;
}
#widget-area .widget, #sidebar .widget {
width:300px;
margin-right:32px;
float:left;
margin-bottom:35px;
}
#footer-logo img {
max-width:300px;
height:auto;
}
#footer-social a i {
height:28px;
width:28px;
line-height:28px;
margin-right:0;
font-size:12px;
}
#footer-social a {
margin:0 5px;
}
#footer-social a span{
display:none;
}
.wpcf7 textarea {
width:94%;
}
.sp-grid li {
width:320px;
}
.sp-grid li:nth-child(3n+3) {
margin-right:0;
}
.sp-grid li:nth-child(2n+2) {
margin-right:0;
}
.container.sp_sidebar #main {
width:300px;
margin-right:0;
}
.container.sp_sidebar #sidebar {
width:300px;
}
.container.sp_sidebar #sidebar .widget {
width:300px;
}
.container.sp_sidebar .item-related {
width:300px;
margin-bottom:30px;
}
.col-md-6.site-top-menu-right.text-right {
display: none;
}
div#sidebar-narrow {
display: none;
}
div#main-part {
float: left;
width: 310px;
}
}

Answer 1

You need to change header image size. Search your code for
#media only screen and (max-width: 767px) and (min-width: 480px){
#logo img {
max-width: 480px;
height: auto;
}
}
#media only screen and (max-width: 767px) {
#logo img {
max-width: 300px;
height: auto;
}
}
img#Header1_headerimg {
width: 180px;
height: 55px;
float: left;
}
and replace it with
img#Header1_headerimg {
width: auto;
height: 50px;
float: left;
}

Answer 2

Change the code in css with this one :
#logo img {
max-width: 10em;
height: auto;
}