title: Github Pages displays different then VS Code live server
body: <p>When I open my site on my VS Code live server, everything is formatted how I want it. Media queries shrink the navbar and the Jumbotron image is displayed properly. However, in my Github Pages, everything is...smaller. The navbar, the text, the jumbotron image. Also, it won't trigger my smallest media query even when the screen is at it's smallest.</p>
  
  <p>I am using SASS and Bootstrap. I'm using the CDN, and it's the correct https link. I'm getting no console or network errors.</p>
  
  <p>Here is my code for my index page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body class="home"&gt;
      &lt;nav class="navbar navbar-expand-sm navbar-dark fixed-top"&gt;
          &lt;a class="navbar-brand" href="index.html"&gt;BC&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="myNav"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                  &lt;li class="nav-item home"&gt;
                      &lt;a class="nav-link" href="index.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item portfolio"&gt;
                      &lt;a class="nav-link" href="portfolio.html"&gt;Portfolio&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item contact"&gt;
                      &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="jumbotron"&gt;
          &lt;img class="myLogo d-none d-sm-block" src="pics/logo.jpg" alt="Billy Cook logo"&gt;
          &lt;h1 class="display-1 jumbotext"&gt;Billy Cook&lt;/h1&gt;
          &lt;p class="display-4 jumbotext fadein"&gt;Welcome to my site.&lt;/p&gt;
          &lt;p class="jumbotext desc fadein"&gt;Below you'll find a list of languages and technologies I have learned while studying at Algonquin College.&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="container fadein"&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/HTML5#/media/File:HTML5_logo_and_wordmark.svg --&gt;
                      &lt;img class="techlogo" src="pics/html.svg" alt="HTML5 logo"&gt;
                      &lt;h1&gt;HTML&lt;/h1&gt;
                      &lt;p class="lead"&gt;As the building block for all websites, profficiency in HTML is important. Without the proper foundation, you are extremely limited with what you can do with a website. From &amp;lt;a&amp;gt; to...&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Cascading_Style_Sheets#/media/File:CSS3_logo_and_wordmark.svg --&gt;
                      &lt;img class="techlogo" src="pics/css.svg" alt="CSS logo"&gt;
                      &lt;h1&gt;CSS&lt;/h1&gt;
                      &lt;p class="lead"&gt;...z index, HTML and CSS go together like two peas in a pod. CSS can be a gamechanger between your website being from 1999 to looking brand new. Let me help you do that.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Sass_(stylesheet_language)#/media/File:Sass_Logo_Color.svg --&gt;
                      &lt;img class="techlogo" src="pics/sass.svg" alt="SASS logo"&gt;
                      &lt;h1&gt;SASS&lt;/h1&gt;
                      &lt;p&gt;SASS is a great way to write meaningful CSS quickly. It incorporates variables and functions to beautify HTML faster and more easily than plain CSS. Who doesn't love efficiency?&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)#/media/File:Bootstrap_logo.svg --&gt;
                      &lt;img class="techlogo" src="pics/boot.png" alt="Bootstrap logo"&gt;
                      &lt;h1&gt;Bootstrap&lt;/h1&gt;
                      &lt;p&gt;Bootstrap is a CSS framework that provides a responsive and mobile-first design for modern websites. From FIFA to NASA, countless international companies use Bootstrap. So does this one.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- Javascript logo: https://commons.wikimedia.org/wiki/File:Badge_js-strict.svg --&gt;
                      &lt;img class="techlogo" src="pics/js.svg" alt="Javascript logo"&gt;
                      &lt;h1&gt;Javascript&lt;/h1&gt;
                      &lt;p class="lead"&gt;Javascript is the master behind the interactive-ness behind modern websites. From validation of forms, to dropdown menus, to pop-up alerts. You can thank Javascript.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/JQuery#/media/File:JQuery_logo.svg --&gt;
                      &lt;img class="techlogo" src="pics/jq.png" alt="J Query logo"&gt;
                      &lt;h1&gt;jQuery&lt;/h1&gt;
                      &lt;p&gt;jQuery is a Javascript framework that simplifies object selection and document manuipulation. &lt;a href="https://blog.logrocket.com/using-jquery-in-2019/"  target="_blank"&gt;While potentially outdated,&lt;/a&gt; jQuery is still used by millions of websites.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Python_(programming_language)#/media/File:Python_logo_and_wordmark.svg --&gt;
                      &lt;img class="techlogo" src="pics/py.png " alt="Python logo"&gt;
                      &lt;h1&gt;Python&lt;/h1&gt;
                      &lt;p class="lead"&gt;Python is a high-level programming language with endless usability. With variables, functions, objects, classes, and more, plenty of back-end applications are possible. It's also extremely readable and simple. Read &lt;a href="https://en.wikipedia.org/wiki/Zen_of_Python" target="_blank"&gt;the Zen of Python here.&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Flask_(web_framework)#/media/File:Flask_logo.svg --&gt;
                      &lt;img class="techlogo" src="pics/flask.svg" alt="Flask logo"&gt;
                      &lt;h1&gt;Flask&lt;/h1&gt;
                      &lt;p&gt;Flask is a Python web framework. It allows us to connect HTML, CSS, Javascript, Python and more to make a completely functional website, backend included.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/MySQL#/media/File:MySQL.svg --&gt;
                      &lt;img class="techlogo" src="pics/sql.png" alt="SQL logo"&gt;
                      &lt;h1&gt;SQL&lt;/h1&gt;
                      &lt;p class="lead"&gt;SELECT * FROM SQLFEATURES; &lt;br&gt; SQL allows us to find key relationships from massive databases. It helps us work with large datasets and find exact values we need.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;h1&gt;Other technologies&lt;/h1&gt;
                      &lt;p class="lead"&gt;Languages aren't the only thing. I have plenty of soft skills as well, from my extensive experience in the Service Industry, including teamwork, initiative, dependability, and responsibility. However, a few more technologies I've worked with are listed as well.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/GitHub#/media/File:Font_Awesome_5_brands_github.svg --&gt;
                      &lt;img class="techlogo github" src="pics/git.svg" alt="Github logo"&gt;
                      &lt;h1&gt;Github&lt;/h1&gt;
                      &lt;p&gt;&lt;em&gt;git init &lt;br&gt;
                      git add -A&lt;br&gt;
                      git commit -m "added everything all at once"&lt;br&gt;
                      git push -u origin master&lt;/em&gt;&lt;br&gt;
                      That's it, right?&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-2"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-10 subrow"&gt;
                      &lt;!-- source: https://en.wikipedia.org/wiki/Raspberry_Pi#/media/File:Raspberry_Pi_Logo.svg --&gt;
                      &lt;img class="techlogo" src="pics/raspi.png" alt="Rasperry Pi logo"&gt;
                      &lt;h1&gt;Rasperri Pi&lt;/h1&gt;
                      &lt;p&gt;Working with a Rasperry Pi has taught me about remote hosting, file transfer, IP address tracking, and much more. It's also given me experience with Command Line Interface commands&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="techgroup"&gt;
              &lt;div class="row mainrow"&gt;
                  &lt;div class="col"&gt;
                      &lt;h1&gt;Coming Soon&lt;/h1&gt;
                      &lt;p class="lead"&gt;During the next few semesters, I will also be studying Network Operating Systems, C#, ASP.net, PHP, XML and much much more.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
          &lt;p&gt;&amp;copy;Billy Cook, 2019&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous" type="text/Javascript"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" type="text/Javascript"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous" type="text/Javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my SASS file:</p>
  
  <pre><code>// color variables
  
  $grey: hsl(0, 0%, 66%);
  $lightgreen: hsl(80, 17%, 58%);
  $black: hsl(203, 24%, 7%);
  $green: hsl(120, 100%, 25%);
  $white: hsl(0, 0%, 100%);
  
  // Styles common to all pages
  .myLogo{
      border-radius: 50%;
      height: 20vh;
  
  }
  .jumbotron{
      min-height: 40vh;
      max-height: 76vh;
      text-align: center;
      background-image: url(https://picsum.photos/id/434/1600/550);
      img{
          display:block;
          margin-left:auto;
          margin-right:auto;
      }
  }
  .jumbotext{
      color: $white;
      font-weight: 400;
      text-shadow: 2px 3px 2px darken($grey, 30%);
      padding-top: 1rem;
  }
  .fadein{
      animation: fadein .8s;
  }
  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  .desc{
      font-size:1.25rem;
  }
  .footer{
      background-color: $green;
      p{
          padding:1rem;
          margin: 0rem;
          text-align: right;
      }
  }
  //Styles for Nav Bar
  .navbar{
      background-color: $green;
      opacity: 95%;
  }
  .navbar-brand{
      border-left: 2px solid $black;
      border-bottom: 2px solid $black;
      padding-right: 1rem;
      padding-left: 1rem;
  }
  .navbar-expand-sm .navbar-nav .nav-link{
      padding-right: 3rem;
      margin-left: 0rem;
      margin-right:1rem;
      padding-left: 1rem;
      border-left: 2px solid $black;
      border-bottom: 2px solid $black;
  }
  .nav-link:hover, .navbar-brand:hover{
      background-color: lighten($green, 5%);
  }
  
  $pages: home, portfolio, contact;
  
  @each $pg in $pages{
      body.#{$pg} li.#{$pg}.nav-item a{
          color: hsla(0, 0%, 100%,1.0);
      }
  }
  
  // Styles for main page
  .mainrow{
      background-color: lighten($green, 62%);
      border: 2px solid $green;
      padding: 1rem;
      margin-bottom: 0.5rem;
      height: auto;
  }
  .subrow{
      background-color: lighten($green, 70%);
      border: 2px solid $green;
      margin-bottom: 0.5rem;
      padding: 1rem;
  }
  .techlogo{
      height: 8rem;
      width: auto;
      float: left;
      padding: 1rem 1rem 1rem;
  }
  .techgroup{
      margin-bottom: 2rem;
  }
  
  
  // Styles for portfolio page
  .card{
      margin-bottom: 1rem;
  }
  .card-img-bottom{
      width: 100%;
  }
  .javapic{
      height: 15rem;
  }
  .github{
      height: 10rem;
  }
  .card:hover{
      box-shadow: 2px 2px 20px $black;
  }
  
  //Style for contact page
  .contactform{
      margin:2rem;
  }
  .form-group{
      padding:0.5rem;
  }
  .radio-container{
      margin: 2rem 0rem;
  }
  .label{
      font-weight:700;
  }
  .contact-container{
      width: 60%;
      min-width: 500px;
  }
  .btn{
      background-color: lighten($green, 10%);
  }
  </code></pre>
  
  <p>And finally, my output CSS file:</p>
  
  <pre><code>.myLogo {
    border-radius: 50%;
    height: 20vh;
  }
  
  .jumbotron {
    min-height: 40vh;
    max-height: 76vh;
    text-align: center;
    background-image: url(https://picsum.photos/id/434/1600/550);
  }
  .jumbotron img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .jumbotext {
    color: white;
    font-weight: 400;
    text-shadow: 2px 3px 2px #5c5c5c;
    padding-top: 1rem;
  }
  
  .fadein {
    animation: fadein 0.8s;
  }
  
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .desc {
    font-size: 1.25rem;
  }
  
  .footer {
    background-color: green;
  }
  .footer p {
    padding: 1rem;
    margin: 0rem;
    text-align: right;
  }
  
  .navbar {
    background-color: green;
    opacity: 95%;
  }
  
  .navbar-brand {
    border-left: 2px solid #0e1316;
    border-bottom: 2px solid #0e1316;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 3rem;
    margin-left: 0rem;
    margin-right: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #0e1316;
    border-bottom: 2px solid #0e1316;
  }
  
  .nav-link:hover, .navbar-brand:hover {
    background-color: #009900;
  }
  
  body.home li.home.nav-item a {
    color: white;
  }
  
  body.portfolio li.portfolio.nav-item a {
    color: white;
  }
  
  body.contact li.contact.nav-item a {
    color: white;
  }
  
  .mainrow {
    background-color: #bdffbd;
    border: 2px solid green;
    padding: 1rem;
    margin-bottom: 0.5rem;
    height: auto;
  }
  
  .subrow {
    background-color: #e6ffe6;
    border: 2px solid green;
    margin-bottom: 0.5rem;
    padding: 1rem;
  }
  
  .techlogo {
    height: 8rem;
    width: auto;
    float: left;
    padding: 1rem 1rem 1rem;
  }
  
  .techgroup {
    margin-bottom: 2rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .card-img-bottom {
    width: 100%;
  }
  
  .javapic {
    height: 15rem;
  }
  
  .github {
    height: 10rem;
  }
  
  .card:hover {
    box-shadow: 2px 2px 20px #0e1316;
  }
  
  .contactform {
    margin: 2rem;
  }
  
  .form-group {
    padding: 0.5rem;
  }
  
  .radio-container {
    margin: 2rem 0rem;
  }
  
  .label {
    font-weight: 700;
  }
  
  .contact-container {
    width: 60%;
    min-width: 500px;
  }
  
  .btn {
    background-color: #00b300;
  }
  
  /*# sourceMappingURL=main.css.map */
  </code></pre>
  
  <p>And a link to my Github pages: <a href="https://cook0318.github.io/MySite/" rel="nofollow noreferrer">https://cook0318.github.io/MySite/</a></p>
  
  <p><a href="https://i.stack.imgur.com/opbo2.jpg" rel="nofollow noreferrer">Here is what my site looks like from Github pages.</a></p>
  
  <p><a href="https://i.stack.imgur.com/o02Hp.jpg" rel="nofollow noreferrer">Here is a photo of what my site looks like when running on my Live Server.</a></p>
  
  <p>Thank you in advance for your help.</p>