My Website looks different when hosted on GitHub pages vs Local Host

[tylencallander]

Body

For some reason, when I host my website on GitHub pages, the logo of my webpage doesn't appear, as well as some margins in the landing section being messed up. I'm not sure how to fix this, so if someone knows a solution to this I would be very appreciative. Attached are photos of my website being hosted locally vs what happens when I host it on GitHub. Here is my repo too.

Thank you

[devmairink]

Check File Paths: Make sure that the file paths to your logo image and CSS files are correct in your HTML code. Sometimes, when moving from local development to a hosted environment, the file paths need to be adjusted.

Inspect Network Requests: Use your browser's developer tools to inspect the network requests and see if there are any errors or missing resources when the page is loaded on GitHub Pages. This can help identify if any assets are not being loaded properly.

Relative vs Absolute Paths: Ensure that you are using relative paths for your assets (e.g., images/logo.png) rather than absolute paths (e.g., /images/logo.png). Relative paths are more flexible and will work regardless of the domain or directory structure.

Clear Cache: Sometimes, browsers cache assets, which can cause outdated or missing content to be displayed. Try clearing your browser cache and then reloading the page on GitHub Pages to see if that resolves the issue.

GitHub Pages Configuration: Double-check your GitHub Pages configuration and make sure that all necessary files and directories are being deployed correctly. Also, ensure that there are no specific settings or configurations in your GitHub repository that could be affecting the rendering of your website.

Cross-Origin Resource Sharing (CORS): If your website is trying to load resources from a different domain (e.g., fonts or APIs), make sure that CORS is properly configured to allow cross-origin requests.