Image and CSS URL paths not resolving to correct locations in browser

When I recorded the network activity of my project on https://zeddrix.github.io/bible-query/, and looked at the path of my style.css, the path should be like this: https://zeddrix.github.io/bible-query/styles/style.css to access my CSS.

But instead of having that, I keep on having https://zeddrix.github.io/styles/style.css without the /bible-query/ that's why it can't be found.

The same happened with my images. For example, instead of having https://zeddrix.github.io/bible-query/img/play-btn.jpg, I keep on having https://zeddrix.github.io/img/play-btn.jpg without the /bible-query/ on the URL again.

I was expecting to have this (on Live Server):

But instead, I keep on having this (on GitHub Page):

Please help me. Here's my repository: https://github.com/zeddrix/bible-query

Try removing the first forward slash from all of the URL references. So, <link rel="stylesheet" href="/styles/style.css" /> would become <link rel="stylesheet" href="styles/style.css" />. This will turn it into a "relative" link, instead of an absolute link.