Why won't my websites Logo resize appropriately?

My desktop version of my website is perfect, and runs exactly how it should, however, on mobile. I've been having Issues

Issue 1

When I uploaded the files to the hosting server, the logo was enormous, and threw everything off balance

Image was throwing everything off balance i.e. Huge Navbar, menu button not aligned to the left

I then resolved this issue with the following Code in my CSS

@media only screen and (min-width: 200px) and (max-width: 670px) {
  .site-branding img {
  max-width:320px;
  max-height:56px;
}
  .main-header {height:80px;}
}

  @media only screen and (min-width: 670px) and (max-width: 1023px) {
    .site-branding img {
    max-width:640px;
    max-height:118px;     
}
    .main-header {height:140px;}
}

Issue 2

After implementing this, the Navbar shrunk, but so did the logo, and changing the values in my CSS did not change the logo size to an appropriate one. It just stayed the same size

Issue 2 Image

Issue 3

This change also affected my Products page, by extending the navbar length on the mobile version, extending the width of the navbar, while keeping all of the other content to it's original alignment

Issue 3 Image

Conclusion

I'd like to know how to keep the logo and the menu bar aligned on the same line, while increasing the size of the logo for the mobile version of the site.

I also do not know what is causing the issue on the products page, and I have no idea how to resolve that issue.

Thank you