Question

I have a wordpress site that I am using a child theme with. In my child style.css, I have made changes to the header, footer, and menu.

The changes to the header and menu work fine. When I use firebug I can tell that it is using the style.css from my child theme. For the footer however, wordpress keeps using the parent style.css and I have no clue why.

Below is my child style.css file:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //bolistylus.com/
Description:    Child theme for the Twenty Eleven theme 
Author:         Eric Rea
Author URI:     http: //ericrea.com/
Template:       twentyeleven
Version:        0.1.0
*/

@import url("../twentyeleven/style.css");

a{ color: #254655; }

body{
background: #ffffff;
}

header#branding{
background: #ffffff;
color: #000000;
}

header#branding h1, header#branding h2, header#branding a{ 
color: #000000; 
text-align: center;
margin-right: 0;
}

header#branding span{
text-align: center;
}

header#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}

header#respond{ background: #E7DFD6; }

.welcome{
margin: 15px 60px;
background: #fbffd8;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}

/* =Menu
-------------------------------------------------------------- */

menu#access {
    background: #ffffff; /* Show a solid color for older browsers */
}
#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
#access li {
    float: left;
    position: relative;
}
#access a {

}
#access ul ul {

}
#access ul ul ul {

}
#access ul ul a {

}
#access a:focus {
}
#access li:hover > a,
#access a:focus {

#access ul li:hover > ul {
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
    font-weight: bold;
}

/* =Footer
----------------------------------------------- */

footer#colophon {
    clear: both;
}
footer#supplementary {
    border-top: 1px solid #ffffff;
    padding: 1.625em 7.6%;
    overflow: hidden;
}

/* Two Footer Widget Areas */
footer#supplementary.two .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 48.1%;
}
footer#supplementary.two .widget-area + .widget-area {
    margin-right: 0;
}

/* Three Footer Widget Areas */
footer#supplementary.three .widget-area {
    float: left;
    margin-right: 3.7%;
    width: 30.85%;
}
footer#supplementary.three .widget-area + .widget-area + .widget-area {
    margin-right: 0;
}

/* Site Generator Line */
footer#site-generator {
    background: #ffffff;
    border-top: 1px solid #ffffff;
    color: #666;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
}
footer#site-generator a {
    color: #666;
    font-weight: bold;
}
footer#site-generator .sep {
    color: transparent;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin: 0 7px;
    width: 16px;
}

Answer 1

Looks like you are missing a closing parentheses } here;

#access a:focus {

#access ul li:hover > ul {
}

Should be

#access a:focus {

}

Right now, everything under that rule – that is, the footer stuff – is being ignored.