I am trying to apply it to the whole website, It just doesn't seem to be working... I tried targeting the body, the container div basically everything I can think of and still haven't had any luck.

If there is any other way to achieve this effect I am all ears.

Just tried that, still no luck. Damn this is annoying, probably something so stupid to. Is there anything that would cancel this out or stop it working correctly?

Here is the sites CSS, yes I am a noob still.

@font-face {
    font-family: 'grosregular';
    src: url('gros___-webfont.eot');
    src: url('gros___-webfont.eot?#iefix') format('embedded-opentype'),
         url('gros___-webfont.woff') format('woff'),
         url('gros___-webfont.ttf') format('truetype'),
         url('gros___-webfont.svg#grosregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexa_lightregular';
    src: url('nexa_light-webfont.eot');
    src: url('nexa_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('nexa_light-webfont.woff') format('woff'),
         url('nexa_light-webfont.ttf') format('truetype'),
         url('nexa_light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
  background-color:#e7e8e9;
  font-family:'grosregular';
  }

#header-1{
  width:152px;
  height:193px;
  margin-left:auto;
  margin-right:auto;
  padding-top:37px;
}

#header-2{
  background-image:url(images/datebox.png);
  background-repeat:no-repeat;
  background-position:0px 2px;
  width:152px;
  height:90px;
  margin-left:auto;
  margin-right:auto;
}

#dateholder{
  font-size:8px;
  color:#FFF;
  width:72px;
  margin-left:auto;
  margin-right:auto;
  padding-top:45px;
  padding-right:64px;
  }

#links{
    margin-top:auto;
  margin-bottom:auto;
  position:fixed;
  width:44px;
  }   

.linkholder li{
  font-size:8px;
  color:#FFF;
  list-style:none;
  text-decoration:none;
  } 

a:link{
  color:#c0c0c0;
  text-decoration:none;
  }

a:visited{
  color:#c0c0c0;
  }

a:hover{
  color:#ef4158;
  }

a:active{
  color:#ef4158;
  } 

.date{
display:block;
  color:#ef4158;
    }

#container{
width:308px;
padding-left:auto;
padding-right:auto;
margin-left:auto;
margin-right:auto;
}

#container p{
font-size:8px;
color:#c0c0c0;
position: relative;
padding-top: 7px;
}

.accent{
color:#ef4158;
font-size: 8px;
}   

#container h1{
font-size: 8px;
color: #ef4158; 
font-style: none;
text-decoration: none;
font-weight: normal;
padding-top:10px;
}

#weekwrapper{
width: 148px;
margin-left: auto;
margin-right:auto;
font-size: 8px;
color:#c0c0c0;
}

#weekwrapper p{ 
width: 150px;
margin-left:auto;
margin-right:auto;
padding-bottom:5px;   
}

#single_1 img{
padding-top:3px;  
}   

#break{
padding-top: 5px;
position : relative;
text-align : center;
margin: 0 0 0 0;
border-bottom : 1px solid #c0c0c0;
}   

#astyle{
padding-top:15px;
padding-bottom: 12px; 
}

.chooseapage ul{
  margin-left:auto;
  margin-right:auto;
  display:inline;
  list-style:none;
  text-decoration:none;
  float:left;
    }

.chooseapage li{
  margin-left:auto;
  margin-right:auto;
  display:inline;
  list-style:none;
  text-decoration:none;
  float:left;
  }       

#container::selection {
  background: #ffb7b7; /* Safari */
  }

#container::-moz-selection {
  background: #ffb7b7; /* Firefox */
}

#container::-webkit-selection  {
       background-color: #FFA;
       color: #000;
}

*::selection { 
  background: #c0c0c0; 
  }

*::-moz-selection {
  background: #c0c0c0; 
} 

Thanks for your help so far by the way, very much appreciated.

Unfortunately, the CSS alone won't help. We need to to see the content as well, that's why I suggested Codepen so we can see it in action.

Unless you have a link to a live site of course.

I don't know why but if I take this out

script type="text/javascript" src="jquery.fancybox-media"></script

a lot of the styling seems to start working where it wasn't before.

Hmmm...there's definitely something overriding it.

I've tried stripping out the sections that shouldn't be relevant but it might take a while to find it.

Frankly, it's not a huge issue, there are quite a few other things that need fixing in that code first but that's another matter.

If I can, I 'll take another look.

I found the problem, your date holder JS is breaking the whole CSS styling. I deleted it and everything worked fine.

I didn't want to re-write the whole page (which it sadly needs) because if I started listing all the errors I would come off sounding mean...oh, oops!

Haha, that is funny but yeah I know what you mean. Poor beginner Luke. Will understand best practices eventually. It only takes years...

Yeah, I noticed that too...but, as I said, I didn't want to pile on too hard.

I may have deleted that line after deleting the other scripts and perhaps Codepen hadn't caught up before redrawing the page.

I'm hoping that what is written on the actual page is actually a lesson plan still to come because if it's stuff they've already covered I'm foreseeing an 'F' coming down the pike.