Thispage error

Question

I have an error that I cannot figure out on my site: www.winneshiekcountyfair.org
I followed David Powers' tutorial Creating Your First Website Part 4. I entered the code to make the menu item on the current page a different color (thispage), but it doesn't appear to be working. Where is my error?
@charset "utf-8";
body    {
    margin: 0px;
    color: #151515;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    background-color: #EFF5F8;
#wrapper {
    background-color: #FFFFFF;
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
#wrapper #hero   {
          position: relative;
#hero article {
          width: 40%;
          padding-left: 10px;
          padding-right: 10px;
          position: absolute;
          color: #FFFFFF;
          background-color: #162F94;
          border-radius: 54px;
#hero h2 {
          text-transform: uppercase;
          margin-top: 10px;
          margin-bottom: -7px;
          margin-left: 14px;
#wrapper #hero article h2 {
#hero img {
    max-width: 100%;
#hero {
          clear: left;
          left: 0px;
h1, h2 {
    color: #3399CC;
    font-style: normal;
    font-weight: 600;
    font-family: source-sans-pro;
h1 {
    font-size: 72px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 0px;
#main {
    width: 58%;
    margin-left: 2%;
    float: left;
#sidebar {
          width: 34%;
          margin-left: 4%;
          float: left;
          padding-left: 20px;
footer {
    clear: left;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2%;
    background-color: #43A6CB;
    color: #FFFFFF;
figure {
    width: 420px;
figure img {
    padding: 10px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 1px 1px 15px #999999;
    box-shadow: 1px 1px 15px #999999;
figcaption {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
.centered {
    margin-left: auto;
    margin-right: auto;
.floatleft {
    margin-right: 10px;
    float: left;
.floatright {
    margin-left: 10px;
    float: right;
a:link {
          font-weight: bold;
          color: #FF6600;
          text-decoration: none;
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
          text-decoration: none;
          background-color: #43A6CB;
a:visited {
          color: #FF944C;
a:hover , a:active, a:focus{
          color: #7F3300;
          text-decoration: underline;
#mainnav ul {
          list-style-type: none;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
#mainnav a {
          width: 20%;
          display: block;
          float: left;
          text-align: center;
          background-color: #0F2169;
          color: #FFFFFF;
          text-transform: uppercase;
          padding-top: 6px;
          padding-bottom: 6px;
#thispage {
          background-color: #41bbe8
article, aside, figure, footer, header, nav {
          display: block;

Answer 1

You might want to fix this -
#thispage {
          background-color: #41bbe8
by changing it to this -
#thispage {
          background-color: #41bbe8;