Changes made to CSS are not taking affect.

I want to change the width of the top image on my homepage. Right now it is displaying too wide and cutting off part of the image. I’m adding the code below in the css stylesheet, but it’s not taking any effect.

This works perfectly when I use it in inspect element-style editor so I don’t know what I’m doing wrong.

The code in the style editor right now is:

.image-section-1,
.image-section-2 {
	background-position: top;
	background-size: cover;
	min-height: 500px;
}

The code I added to the style sheet is this. I only want to change image-section-1.

.image-section-1 {
	background-size: contain;
        background-repeat: no-repeat;
	height: 0;
	padding-top: 13.8%;
	padding-bottom: 13.8%;
}

My website is http://www.taykoplanks.com/. Thanks.