[Resuelto] Problema con resposive usando varios tamaños

Hola, estoy siguiendo un curso para aprender a hacer webs.
El problema que encuentro es que ellos en el curso consiguen que funcione la web, pero yo por mas vueltas que le doy no consigo saber que es lo que hago mal. No consigo que cuando tienes la pagina a un determinado tamaño enseñe la parte que debe, normalmente solo funciona una, o la great o la medium o la mini, pero no las 3 a la vez.

A ver si podeis echarme una mano ^^ Muchas gracias a todos

index.html

Código:

DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>Ejemplo de adaptativo</title>
    <link href="css/colors.css" rel="stylesheet" type="text/css">
    <link href="css/base.css" rel="stylesheet" type="text/css">
    <link href="css/great.css" rel="stylesheet" type="text/css" media="screen and (min width: 981px)">
    <link href="css/medium.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 980px)">
    <link href="css/mini.css" rel="stylesheet" type="text/css" media="screen and (max width: 480px)">
  </head>
  <body>
    <header>
      <h1>El titulo de mi sitio web </h1>
      <h2 class="display-great">Grandisimo</h2>
      <h2 class="display-great">Grande</h2>
      <h2 class="display-medium">Mediano</h2>
      <h2 class="display-mini">Mini</h2>
    </header>
    <div id="wrapper">
      <nav class="main-nav">
        <h2>Mi menu</h2>
        <select class="menu display-great display-medium">
          <option>Uno</option>
          <option>Dos</option>
          <option>Tres</option>
        </select>
        <select class="display-mini">
          <option>Uno</option>
          <option>Dos</option>
          <option>Tres</option>
        </select>
      </nav>
      <section id="main-section">
        <h2>Mi Contenido </h2>
        <article>
          <h3><a href="#">Entrada1</a></h3>
          <p class="display-great display-medium">Un lorem</p>
        </article>
        <article>
          <h3><a href="#">Entrada2</a></h3>
          <p class="display-great display-medium">Un lorem</p>
        </article>
        <article>
          <h3><a href="#">Entrada3</a></h3>
          <p class="display-great display-medium">Un lorem</p>
        </article>
      </section>
    </div>
    <footer>
      <p>Esto es el pie</p>
      <select class="display-mini">
        <option>Uno</option>
        <option>Dos</option>
        <option>Tres</option>
      </select>
    </footer>
  </body>
</html>

los distintos CSS

colors.css

Código:

body {
  color: black;
}

header {
  background-color: #f47e7d;
}

nav {
  background-color: #b5d045;
}

section {
  background-color: #e0c7a8;
}

footer {
  background-color: #fb8335;
}

a,a:link, a:visited, a:active, a:hove {
  color: #81c0c5;
}

base.css

Código:

.display-mini {
  display: none;
}

.display-great {
  display: none;
}

.display-medium {
  display: none;
}

.menu{
  padding-left: 0;
}

.menu li{
  display: inline;
  list-style-type: none;
}

great.css

Código:

.display-great {
  display: inherit !important;
}

h1, h2 {
  text-align: center;
}

header, footer, #wrapper {
  margin-left:auto;
  margin-right: auto;
  clear: both;
  width: 100%;
  max-width: 1500px;
}

#main-nav {
  float: left;
  width: 20%;
  max-width: 300px;
}

main-section {
  margin-left: 21%;
  width: 79%;
  max-width: 1200px;
}

medium.css

Código:

.display-medium {
  display: inherit !important;
}

body{
  font-family: Georgia;
}

mini.css

Código:

.display-mini {
  display: inherit !important;
}
body {
  font-family: Arial;
}

select.display-mini {
  font-size:1.2em;
  width:100%;
}