Music Theory Website

I was just curious to know what you think about this website I'm designing. I would just like any constructive feedback that you might have.

http://jackatron.web44.net/music/



`@import url(http://fonts.googleapis.com/css?family=Lato);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

,:before,*:after { box-sizing: border-box; }
.mainHeader {
background: rgb(255,0,0);
padding: 12px;
}
.mainHeader h1,h2,h3 {
text-align: center;
color: rgb(255,255,255);
font-family: "Lato";
}
.mainHeader h1 {
font-size: 24px;
font-weight: bold;
color: rgb(0,0,0);
}
.mainHeader h2 {
font-size: 20px;
margin-bottom: 2px;
}
.mainHeader h3 {
font-style: italic;
}
.mainArticle {
box-shadow: 1px 1px 9px #888888;
padding: 12px;
margin: 24px auto;
width: 90%;
}
.mainArticle h1 {
font: 24px "Lato";
font-weight: bold;
}
.mainArticle h2 {
color: rgb(0,0,0);
text-align: left;
}
.mainArticle ul {
padding: 0;
display: inline;
}
.mainArticle ul li{
margin-left: 22px;
font-family: "Lato";
list-style-type: square;
}
.mainFooter {
border-

First, your HTML passes the W3C validator with no errors. This will help all browsers render it the same, and make it easier to maintain.

However, because you are using HTML5, you should use the header element instead of a div:

  GCSE Music Revision
  Edexcel Based
  By Jack Winstanley

This section also should be a nav element instead of a div:

  Set Works:
  
    HOME
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  

Your CSS does have two errors according to the validator.

First, you cannot set font-weight: none;. If you wish to use the default value, change it to initial, if you wish to inherit it from the parent element, use inherit; otherwise, use a specific number or a predefined value, such as bold:

@media print {
    mark { font-weight: none; background:none; }
}

Second, there is no property pointer-events:

.current {
    pointer-events: none;
}

A third problem is you should use a common font that is installed on most machines, unless you are going to include the font in your webpage. I know that my Windows machine does not have Lato installed, and I don't think my parents' MacBook has it either; also, you should specify a few different fonts just in case one is not installed so it doesn't just use the default - you can also specify a font family to default to, such as serif.

StackExchange Code Review Q#85697, answer score: 11