Bootstrap and/or media queries not working on Github Pages - html

Question

I want to host a website using GitHub Pages. I was able to upload it, and it works perfectly on a computer. However, when I open it on a phone the Bootstrap and/or media queries is not working, because the website looks like its shrink to fit, instead of taking the responsive layout I coded.
Right now my files look like:
index.html
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- JS (end of body) -->
<script src="js/custom.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
responsive.css
#media only screen and (max-width: 768px){
.header-picture{
display: none;
}
The problem is that on my phone the website looks like this: non-responsive
When it should look like this (according to responsinator): responsive
I followed
Bootstrap / CSS not working on Github Pages
and tried to fix it by adding the file location on github. However, I got the same result
index.html
<!-- Meta tag for responsive websites -->
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/style.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/responsive.css">
<!-- JS-->
<script src="https://EmiliaPaz.github.io/js/custom.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.js"></script>
<script src="https://EmiliaPaz.github.io/js/bootstrap.min.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.bxslider.js"></script>
What I find really curious is that when I put my website URL (https://emiliapaz.github.io/) on responsinator.com , it shows that it should work on smaller screens but it doesnt!
Thanks for the help, I am really stuck

Answer 1

There's a typo with your <meta> tags (width-device-width).
Change from:
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Answer 2

Meta viewport needs to fit the device width on safari IOS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For More Info Reference Stack Question below:
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?