CSS changes only showing in customizer but not on live site

Hi, my CSS is also not working when I set it live on my site. Currently im trying to reduce the padding on the sides of my nav and section header. It looks fine in the CSS editor but not on the live site. my site is https://greygray.ca/ pw: shadowwork. Please let me know how I can fix this.

above: view in CSS editor [Ideal view]

vs how it looks live. 

here is the code I used: 

.header .header-announcement-bar-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2vw!important;
    padding-bottom: 2vw!important;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto
}
.section-border {
    position: absolute;
    top: calc(-1 * var(--previous-section-divider-offset, 0px));
    right: -2vw!important;
    bottom: 0;
    left: -2vw!important;
}

46 minutes ago, Nicoleplee said:

Hi, my CSS is also not working when I set it live on my site. Currently im trying to reduce the padding on the sides of my nav and section header. It looks fine in the CSS editor but not on the live site. my site is https://greygray.ca/ pw: shadowwork. Please let me know how I can fix this.

above: view in CSS editor [Ideal view]

vs how it looks live. 

here is the code I used: 

.header .header-announcement-bar-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2vw!important;
    padding-bottom: 2vw!important;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto
}
.section-border {
    position: absolute;
    top: calc(-1 * var(--previous-section-divider-offset, 0px));
    right: -2vw!important;
    bottom: 0;
    left: -2vw!important;
}

I see you made some coding errors in the custom CSS section. That's why it not working. Can you share your all code? Then I'll fix it.

Thank you! This is all the code I used so far. Still working on the website. Can you tell me what errors I made so I can fix them as I continue working on my site?

.header .header-announcement-bar-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2vw!important;
    padding-bottom: 2vw!important;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto
}
.section-border {
    position: absolute;
    top: calc(-1 * var(--previous-section-divider-offset, 0px));
    right: -2vw!important;
    bottom: 0;
    left: -2vw!important;
}