Final Update: I set the header width to 100% and the problem resolved.
Update: I figured out it has to do with setting the header to a fixed position, but removing the fixed value from the position attribute makes the the header scroll while the nav bar remains fixed.
I’ve been working on my product landing page and I created an SVG to use as the header, I added the SVG code into the html and removed the assigned height and width attributes that were listed near the viewbox. I assigned a percentage to the width attribute of the SVG in CSS and it was working fine with that value, I proceeded to add width values for different screen sizes and it again worked fine, but at some point I decreased the width of the SVG further while still working on other parts of the code. Around this time I noticed that when I resized the browser, the SVG stopped responding to the code and started resizing strangely, when you shrink the browser, it will decrease in size, but when you increase the browser size after shrinking it, the SVG continues to shrink. I am using the latest edition of Mozilla Firefox but the issue of the persists on my iPhone browser as well. I am completely new to using SVG’s so the problem alludes me. I would greatly appreciate any advice or tips. Thank you!