Jekyll Horizontal Nav Bar Troubles - css

Question

I am attempting to make a horizontal navigation bar in a jekyll site. I am not sure if the CSS I am using is incorrect, or if it's not compiling correctly with Jekyll.
Here is my current approach:
- Make changes in _scss/_layout.css
- Check the changes are there in _site/main.css (they are)
- Check for errors in jekyll serve console (don't see any)
When I look at my generated site and hit inspect, I don't see the CSS changes being applied.
Sass code in _sass/_layout.scss:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-weight: 200;
}
header {
background: $header;
padding: 0px 15px;
text-align: center;
margin: 50px 0 0;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
Full repo for my site is here - https://github.com/ericadohring/groupdayout/ and help would be greatly appreciated!

Answer 1

Github pages isn't showing changes anymore because there is an error that prevents Jekyll to build your site.
In _sass/_layout.scss there is a property that is using an undefined variable:
header {
background: $header;
...
}
To fix it just assign a value to it before using the variable, e.g.:
$header: #f0ad4e;
header {
background: $header;
...
}
Now you will be able to work on your site and seeing the changes reflected in Github pages.