White Space Above And Below SVG File

I am using a .svg file for my logo. This is the first time I've worked with a .svg file. I literally just uploaded my new website and discovered extra white space above and below my logo. The logo looks perfect when viewed on a desktop, but from my iPhone the extra space is there and I can not figure out why. I have spent hours searching the Internet, watching YouTube videos, and reading article after article on .svg files. I've tried everything, but nothing seems to works.

I have run numerous tests, replacing the .svg file with a .png file, same size, same everything, and the .png file displays with no white space, the .svg does. With my .svg code, I've used height and width; height and width with viewBox; just viewBox. I've tried linking to the .svg file and straight inline. The same thing, over and over again. White space. 

I have tried dozens of exporting options from Illustrator, trying all different combinations of options. Same thing!

The images below are screenshots of the header of my website I took from my phone. My logo size is 540 x 235. For testing purposes I just filled the 540 x 235 with a gradient; its not my logo.

Any assistance would be greatly appreciated.

website: www.theresatreeforthat.com

Thank you

Michael