<div><span>$</span><span>25</span><sub>Monthly</sup></div>
У вас тег sub только открывается, а тег sup только закрывается, причем по всей видимости не там, где должен - что-то тут не так...
<div class="button"><button>ENROLL TODAY</button></div>
Не нашел ни одной причины почему кнопка обернута в div с классом button - почему бы не применять стили к ней самой? И почему бы не трансформировать текст к верхнему регистру с помощью text-transform: uppercase (это относится и к заголовкам)?
div.outer div.inner ul li:nth-of-type(2n)
Наверху правильно заметили - используйте только классы (.outer .inner вместо div.outer div.inner). Также стоит отметить, что селекторы с такой глубокой вложенностью - зло. Разбивайте все на меньшие компоненты и почитайте про BEM или что-то еще в этом духе.
color: #2F4F4F;
color: white;
background-color: #f5f5f6;
Определитесь как задавать цвета - верхний и нижний регистр в сочетании с переодическими вкраплениями названий цветов создает невероятную кашу. Почитайте про препроцесоры (для начала про LESS - он самый простой) и начните использовать переменные.
font-family: 'Trebuchet MS';
width: 300px;
min-height: 470px;
font-family: 'Trebuchet MS';
Повторение - мать заикания. А если серьезно - постучите дизайнеру клавиатурой по голове, чтобы не использовал платные шрифты из Windows (без них у меня под линуксом ваша карточка выглядит как...)
Набросал
демку на codepen с примером использования переменных в LESS, именованием классов в соответствии с rscss и вообще всякими фишками, которые могут быть вам полезны (значения всего брал на глазок, тестировал только в Chrome, но по идее должно работать IE11+).
Простой
Простой