Mobile specific CSS setting not working properly

Hi, I'm using the OM template to create a simple artist page. Most of the page is pretty much set except that on mobile screens the page is not displaying correctly.What I want is for the Nav bar to be underneath the logo, the logo itself to be top and center of the page and for the background images to fill full screen.

However, I got this to work briefly but now the media CSS appears to not work. The url of the website is richiequake.com and the password to view it is Help123.

UPDATE

I have decided to place the logo on the upper left hand and the menu button on the upper right hand side of the website. This is my CSS now:
 

media screen and (max-width: 500px) {
  #header {
    float: none;
    display: block;
    text-align: left;
  }}

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 .canvas{
    max-width: 100% !important;
    max-height: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

@media only screen and (max-width: 400px) {
  .logo-image .logo img {
    position: relative;
    right: 100px;
    top: -130px;
    width: 60%; //add for good resize based to screen  
  }
}

@media only screen and (max-width: 400px) {
  #mobileMenuLink {
    margin: 0;
    display: inline-block; //change block to inline
    position: relative;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    visibility: visible;
    left: 70%;
    top: -2%;
  }
}

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 {
    
  }
}

.page-borders-thick #mobileMenuLink {
        border-bottom-width: 2px;
        padding: 5%; // ADD PADDING
    
}

#mobileNav {
  background: none;
  position: relative;
  top: 50%;
}

#mobileNav .wrapper {
  border-bottom-style: none;
  border-bottom-color: none;
}

#mobileNav .menu-open {
   margin-top: 30px !important;
}

Now my issue is that I want the menu to open down when the button is clicked. I tried to do this by using the  .menu-open class but that did not work. How can I do this?

#yui will change if you reload your page. Don't use #yui

Use #block-yui