Custom CSS not overriding theme's original stylesheet- Serendipity

Hi There-
After lots of searching, I finally found the theme I wanted- Serendipity. I purchased and downloaded the theme, and since have made aesthetic changes in the custom css plugin. I always “test” my changes first by using the “inspect element” tab by right clicking on my page. I’m a newbie, and this works for me. Then I copy the css coding and paste it into the custom css plugin, making desired changes, then saving. It has worked beautifully until now.
The theme I’m using has a shadow built into the structure to look like piece of paper over a background. However, I want a stark white background, and no “paper shadow’. I found the code to change, tested it, then used custom css to make the change like I always do. This time it won’t override. Any ideas? I’m getting closer and closer to being really happy with this blog. I greatly appreciate any help.
The code in question (BEFORE changing many of the pixel values to ‘0″) is this…

[ Moderator note: please wrap code in backticks or use the code button. ]

/*-----------------------------------------------------------------------------------*/
/*	STRUCTURE
/*-----------------------------------------------------------------------------------*/

#branding #site-title {
	margin: 0 39px 39px 39px;
}

#primary {
	width: 100%;
}

#page {
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
	max-width: 1040px;
	margin: 50px auto;
}

#wrapper {
	background: #FFF;
	border: 1px solid #f8f8f8;
	-moz-box-shadow: inset 0 0 25px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 0 25px 0 rgba(0,0,0,0.15);
	box-shadow: inset 0 0 25px 0 rgba(0,0,0,0.15);
}

#content {
	margin: 0 39px;
	width: auto;
}

#main {
	clear: both;
	padding: 8px 0 0 0;
}

The site in question is beccaraisor.com

Thank you.
xx