Fonts and other styles are different in local and

Question

I see changes in the look and feel of local and live version (hosted on Github).

Below is the local version..

and here is the live version

The font-style, etc. seems to be different in these versions?

Below are my css codes.

# _sass/_layout.scss

#banner {
    /* @include retina-background-image($img-banner); */
    /* background-color: #8e8387;*/
    outline: none;
    // display: block;
    // width: $banner-width;
    // height: $banner-height;
    margin: 35px 0 auto 35px;
    position: relative; 
    /* To ensure the bottom border is positioned correctly */

    h1 {
        // Font is included from Google Fonts automatically unless a custom banner is used
        // See _config.yml for details
        font-family: $banner-font-family;
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0.03em;
        color: #fefefe;
        position: absolute;
        bottom: 20px;
        width: 100%;
    }

    &::after {
        // display: block;
        // position: absolute;
        // top: $banner-height;
        // left: $banner-border-offset;
        // content: "";
        // background: #443E40;
        // height: $banner-border-width;
         width: $banner-width - ($banner-border-offset* 2);
    }

    @include min-breakpoint($image-splitting-breakpoint) {
        // margin-bottom: $banner-margin;
    }
}

#footer {
    margin-top: 50px;
    text-align: center;
    margin-bottom: 50px;

    /* &::after {
        @include retina-background-image($img-dude);
        display: block;
        content: "";
        width: 65px;
        height: 158px;
        margin: 20px auto 50px;
    } */

    a {
        // Overwrite default link color
        color: #222;

        &:hover {
            // ... but allow the hover color to work as normal
            color: $hover-color;
        }
    }

    p {
        margin: 0 0 9px;
        line-height: 1.3;
        font-size: 19px;
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;

        @include min-breakpoint($image-splitting-breakpoint) {
            font-size: 18px;
            line-height: 1;
        }
    }
}

section[role="main"] {
    width: 90%;
    margin: 0 auto;

    @include min-breakpoint($desktop-breakpoint) {
        width: $layout-width;
    }
}

And then,

# css/screen.scss

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// Typography
$base-font-family: "adobe-caslon-pro", "Adobe Caslon Pro", serif;
$caption-font-family: "ltc-bodoni-175", "Libre Baskerville", serif;
$banner-font-family: "Sanchez", serif;
$title-font-family: "Libre Baskerville", serif;
$base-font-size:   18px;
$base-font-weight: 400;
$base-line-height: 1;

// Colours
$text-color:       #222;
$caption-text-color: #444;
$border-color: #979797;
$background-color: #fefefe;
$content-width:    750px;
$hover-color: #443E40;
$legal-color: #818181;

// Layout
$layout-width: 750px;

// Breakpoints
$desktop-breakpoint: $layout-width / 0.9;
$image-splitting-breakpoint: 510px;

// Banner
 $banner-width: 182px;
 $banner-height: 503px;
 $banner-margin: 50px;
 $banner-border-width: 3px;
 $banner-border-offset: 2px;

// Images
// Note that extensions are omitted for use in retina-background-image mixin

$img-separator: '{{ site.baseurl }}/img/separator';
$img-banner: '{{ site.baseurl }}/img/banner';
$img-dude: '{{ site.baseurl }}/img/dude';
$img-location: '{{ site.baseurl }}/img/icon-location';

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "mixins",
        "vendors",
        "base",
        "layout",
        "modules"
;

And the html code is below

---
layout: page
title: "Our journey"
date: 2018-04-09 
categories: 
location: 
---

Alice and Bob are about to start a wonderful journey with their cat.

We will start their journey on
<div style="text-align:center;">
<p class="post-image-caption"><strong>9th April, 2018</strong> <br/><span style="font-size: 90%;">9.00 AM onwards.<br/>(To be specific: 9.30 AM)</span></p>
</div>

<div class="post-image post-image--split">
    <img src="http://placehold.it/365x270/8e8387/ffffff" alt="The first in an example of split-imagery" />
    <img src="http://placehold.it/365x270/8e8387/ffffff" alt="The second in an example of split-imagery" />
</div> 

<p class="post-image-caption"><strong>This is their cat</strong><span style="font-size: 85%;"> (<a style ="color:blue;" href="../img/catpic.png" target="_blank">Her pic</a>)</span> <br>She purrs, <br>She is very cute and calm<br> </p>

<div class="post-image">
    <img src="http://placehold.it/750x563/8e8387/ffffff" alt="A full-size image example" />
    <p class="post-image-caption">Here we demonstrate a caption. This'll adapt to any length of text.</p>
</div>

Seems like css itself has other problems as stated here - where on page load it focuses to the middle of the page rather than the beginning of the page. Most likely, this is not related to the different views of the fonts. However, I thought of linking it here for reference.