Page layout rendered differently on github-pages

I created a user site on github-pages. For the layout, I am using yui to specify proportions. The layout seems to render correctly when viewed locally (opening index.html in a browser) but incorrectly when opened from the deployed github-pages.

For example I specify the first section should use class="yui-gc" which is a 2/3 to 1/3 proportion respectively. Locally (left) vs Deployed (right) in the same browser

Then later I specify the remaining sections should use class="yui-gf" which is a 1/4 to 3/4 proportion respectively. Locally (left) vs Deployed (right) again the same browser

Any idea why the layout is changing when deployed to github-pages? Is there something I can specify in the css to make them consistent, and preferably the way it is rendered locally?

For reference source html and source css

When you open the console while loading your site on GitHub Pages, it shows :

The page at 'https://cory-kramer.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css'. This request has been blocked; the content must be served over HTTPS.

You are requesting a file served over HTTP while your website (GitHub pages) is using HTTPS. This is not allowed by browsers for security purposes.

Because of that, the yui CSS file is not loaded, and your layout breaks.

As far as I can tell yahooapis (that you are using) does not provide an HTTPS version of its CDN, it should be easier for you to copy the file and add it to your GitHub repo, and then reference it relatively (as you did with your resume.css file)

As a side note : it works locally when you test on your machine, because when you opens it, it does not use http protocol (the url should start with file:// and not http://), so you are allowed to request non-secured http files.