dm

У платной темы в обязательном порядке должна быть инструкция, в которой все и описано. Ты импортировал демо контент? https://vimeo.com/126604420

Внизу в комментах объяснение, что в англ. сети прижился вариант написания не тот, кот. был изначально. frontender.info/learning-to-love-bem
Потому и различия. А суть та же

gilbitron.github.io/Ideal-Image-Slider
Простой, адаптивный, 3 варианта управления, один из которых такой как на скрине

Заказчик может накидать примерно, как видит наполнение сайта текстом, а копирайтер уже красиво воплотит в жизнь.

P. S. Если нужно, подскажу хорошего автора

Это как изменить квартиру соседа под свои нужды без его ведома. ) В консоли можно менять, но изменения не сохраняются, само собой.

1. Семантика на нуле. Header, footer, nav и пр. отсутствуют
2. Названия классов есть плохие (title, name, ten и пр.) – пространство имен и все такое. Ten – по названию нифига непонятно к чему это может относиться.
3. Пункты меню в html написаны капслоком, а если передумает владелец сайта, нужно будет менять текст. Есть же text-transform: uppercase
4. В css если значение 0, то пиксели можно не писать.
5. Валидатор - validator.w3.org/check?uri=http%3A%2F%2Fcolorkid.r...
6. padding-top:5px; padding-bottom:5px; Такое можно писать короче - padding: 5px 0;

Не знаю, есть ли в браузере, а скачать или же сразу подключить можно здесь - fonts4web.ru/helvetica.html
Там есть и инструкция по подключению

Sueva очень нравится - https://wordpress.org/themes/suevafree/

В HTML нужному элементу меню добавляете класс active, а в CSS описываете его стили.

HTML
<li class="item-112 active">
CSS

.active {
/* стили выделенного меню */
}

Начни отсюда: https://htmlacademy.ru/
Здесь учат правильно верстать.
По ходу изучения и практики обзаведешься нужными инструментами.

Для построения сеток есть замечательное свойство flex, на которое скоро все перейдут. А пока оно браузерами поддерживается не полностью, используйте float.

Вот вам отличная полезная статья по оценке верстки, с ее помощью можно самостоятельно увидеть косяки.
habrahabr.ru/company/htmlacademy/blog/254171

Названия классов не очень хорошие, а некоторые плохие:
<div class="image">

Правила CSS написаны в одну строку, читать не очень удобно. Это не ошибка, конечно, но надо думать и о поддерже ресурса в дальнейшем.

Такой прием не считается хорошей практикой:
* {margin: 0; padding: 0;}

Не лишним было бы обозначить в меню текущую страницу, для понимания где находишься.

RECENT POSTS не кликабельные.

Да, будет в индексе

Накрасьте ему спину (background) мелом, свяжите шнурки (footer с header) и положите кнопку (audio) на стул.

Добавь top: 5px; и свершится чудо. )

#label:after {
  top: 5px;
}

Размеры внутренних ячеек в процентах заданы? Ширина

Вот вам готовая шапка:
HTML

<header>
<div></div>
<div></div>
<div></div>
</header>

CSS

header {
width: 75%;
margin: 0 auto;
}
div {
float: left;
width: 33%;
}
header::after {
content: "";
display: block;
clear: both;
}

Сделайте картинку блочной, а не строчной, как по умолчанию

img {
display: block;
}

Лучше использовать не color, а opacity, потому что вдруг цвет яблока (или чего угодно) со временем решат изменить, придется и color менять.

a: hover {
    opacity: 0.8;
}

opacity делает прозрачность элементу

Если задача сверстать сайт для конкретного разрешения и только для него, то пиксели подходят вполне. Но если вы хотите, чтобы сайт выглядел хорошо на разных разрешениях, тогда em и проценты.

Делаешь блоки, задаешь им ширину 32% (+4% на 2 отступа), задаешь флоат.

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    float: left;
    width: 32%;
    margin-right: 2%
}
div:nth-of-type(3n) {
    margin-right: 0;
}
section::after {
    content: "";
    display: block;
    clear: both;
}