Header issues on mobile device

Greetings,

I am finally taking efforts to make our non-profit’s page responsive, but I am stuck on adjusting the header, and ‘content wider than screen’.

Header looks fine on all desktop browsers, but when loaded on my iphone, the header image is only a portion of the screen, and the rest appears black. Any help would be greatly appreciated. I have made no changes to the theme’s files. The screenshot is here: https://bakashana.org/wp-content/uploads/2019/01/Image-1.jpg

Regarding the ‘content wider than screen’, I have tried all recommended changes according to google developer with no luck.

The custom css is included below:

/* page background */
#page{
background:#7C1F1A url(https://bakashana.org/wp-content/uploads/2017/11/website-background-trial-4.jpg) no-repeat center top; width:100%;
}
#header {
background: url(“https://bakashana.org/wp-content/uploads/2019/01/Logo-Transparent-500.png” );
background-repeat: no-repeat;
background-position: 50% 5%;
width: 100%;
}

/* Header background */

#logo{
float:none;
display:none;
}
#site-title .headline{
float:none;
border:0;
margin:0px 0px 0px 0px;
padding:0px;
color:#000000;
text-align:center;
font-family: Calibri;
font-size: 24px;
font-style: normal;
text-transform: capitalize;
font-variant: normal;
letter-spacing: 1px;

}

body{text-align:justify;}

.fixed.col-2-right #primary-content{width:65%;left:33%}
.fixed.col-2-right #sidebar{width:28%;left:36.7%}

.home.fixed.col-2-right #primary-content{padding-top: 2.5%;}

/* headings */
h1{font-weight:normal;font-size:270%;line-height:130%;margin: 0 0 .2em;letter-spacing:-0.04em; color:#781C23;}
h2{font-weight:normal;font-size:200%;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.03em;}
h3{font-size:160%;font-weight:normal;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.02em;}
h4{font-size:140%;font-weight:bold;margin:.7em 0 .2em;letter-spacing:-0.02em;}
h5{font-family:”Palatino Linotype”, Georgia, Serif;font-size:140%;font-weight:bold;margin:.5em 0 .2em;letter-spacing:-0.02em;}
h6{font-size:120%;font-weight:normal;text-transform:uppercase;margin:.5em 0 .2em;}

/* links */
a{color:#0071bb;outline:none;}
a:hover{color:#ed1e24;text-decoration:none;}

/* Remove Page Headings */
h1.title{display:none}

/* Table Background Remove */
#table th{background-color:transparent;
color:#fff;
text-transform:uppercase;
font-weight:bold;
border-bottom:1px solid #e8e1c8;}
#table td{background-color:transparent !important;}
#table th a:hover{color:transparent !important;}
#table tr:hover td{background-color:transparent !important;}

/* caption text size */
.wp-caption-text{
font-size:small;
color:black;
vertical-align:top;
}
/* remove space b/n widgets */
.block{margin:0 0 0 0;}

/* Remove Widget Titles */
.block .title{
display: none;
}

Thanks in advance!

The page I need help with: [log in to see the link]