Can't make changes to Child Theme

Hello,

I am currently trying to learn how to customize my WordPress Child Theme. This is the guide that I am following, http://www.presscoders.com/wordpress-theme-customization-guide/#chapterseven.

I downloaded the Designfolio theme, created a child theme for it, activated that child theme, and used the Chrome Dev Tool (the Inspect element function) to find the CSS style code of the header of my child theme, and I changed the color in the code using a different hex number (the change appeared as I chose a different hex number). Then I copied the new code with the new hex number, went to Dashboard > Appearance > Editor. The style sheet originally looked like this:
/*
Theme Name: My Child Theme 1 (7/14, 10:09AM)
Theme URI: http://www.presscoders.com/designfolio
Description: Child theme for the Designfolio theme.
Author: Vince Dao
Author URI: http://www.presscoders.com
Template: designfolio
Version: 0.1.0
*/

@import url(‘../designfolio/style.css’);

I copied the following code under the @import url line:

#header-container, .footer-widget-container {
background: #880B56;
}

According to the guide I posted above, I should be able to see the changes after I hit Refresh on my child theme page. However, I don’t see any. More strangely, I checked the CSS codes using Chrome Dev Tool and this is what I found

media=”all”
#header-container, .footer-widget-container {
/* background: #253944; */ <- Default color
}

media=”screen”
#header-container, .footer-widget-container {
background: #880B56; <- My new color
}

So the style sheet was updated but the changes weren’t applied. Can you please help me on this one? Thanks a bunch!

Btw, I would love to provide a link to my site for you guys to see, but I created my site locally. Will provide a link as soon as I got my site online. 🙂