title: Having problems connecting CSS to HTML
body: <p>I'm having trouble connecting CSS to my HTML page, for some reason my .btn, .post-image, .read-more, .post-preview settings doesn't work. I'm following this guide - <a href="https://youtu.be/zAjDc1HPgYM" rel="nofollow noreferrer">https://youtu.be/zAjDc1HPgYM</a>
  seems like my code is identical but perhaps I've missed something especially since I'm a beginner. Here's my HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Блог&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
      &lt;div class=&quot;logo&quot;&gt;
          &lt;h1 class=&quot;logo-text&quot;&gt;&lt;span&gt;Комюнити&lt;/span&gt; Веб&lt;/h1&gt;
      &lt;/div&gt;
  &lt;ul class=&quot;nav&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Домой&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Про нас&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Услуги&lt;/a&gt;&lt;/li&gt;
      &lt;!-- li&gt;&lt;a href=&quot;#&quot;&gt;Подписатся&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Войти&lt;/a&gt;&lt;/li --&gt;
      &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;Илья Админ&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Дашборд&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;logout&quot;&gt;Выйти&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/header&gt;
  &lt;div class=&quot;content clearfix&quot;&gt;
      &lt;div class=&quot;main-content&quot;&gt;
          &lt;h1 class=&quot;recent-post-title&quot;&gt;Недавние посты&lt;/h1&gt;
          &lt;div class=&quot;post&quot;&gt;
              &lt;img src=&quot;img/about-me.jpg&quot; alt=&quot;&quot; class=&quot;post-image&quot;&gt;
              &lt;div class=&quot;post-preview&quot;&gt;
                  &lt;h2&gt;&lt;a href=&quot;single.html&quot;&gt;Название потом придумаю&lt;/a&gt; &lt;/h2&gt;
                  &lt;i class=&quot;far fa-user&quot;&gt;Илья Дерий&lt;/i&gt;
                  &amp;nbsp;
                  &lt;i class=&quot;far calendar&quot;&gt;Окт 13, 2020&lt;/i&gt;
                  &lt;p class=&quot;preview-text&quot;&gt;
                      Название Название Название Название Название Название Название Название Название Название Название Название Название Название Название
                  &lt;/p&gt;
                  &lt;a href=&quot;single.html&quot; class=&quot;btn read-more&quot;&gt;Открыть полностью&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here's my CSS</p>
  <pre><code>* {
      box-sizing: border-box;
  }
  body{
      padding: 0px;
      margin: 0px;
      background-color: #CCCCCC;
      font-family: Beirut, Serif;
  }
  header{
      background: #a94442;
      height: 66px;
  }
  header * {
      color: white;
  }
  header .logo {
      float: left;
      height: inherit;
      margin-left: 2em;
      font-family: Avenir, Serif;
  }
  header .logo-text{
  margin: 9px;
  }
  header .logo-text span{
      color: #283121;
  }
  header ul {
      float: right;
      margin: 0px;
      padding: 0px;
      list-style: none;
  }
  header ul li{
      float: left;
      position: relative;
  }
  header ul li  ul{
  position: absolute;
      top: 66px;
      right: 0px;
      width: 180px;
      display: none;
  }
  header ul li:hover ul{
  display: block;
  }
  header ul li  ul li{
      width: 100%;
  }
  header ul li  ul li a{
      padding: 10px;
      background-color: #F6F7F9;
      color: #333333;
  }
  header ul li  ul li a.logout{
      color: #a94442;
  }
  header ul li  ul li a:hover{
  background-color: #8D8D8D;
  }
  header ul li  a:hover {
      background: darkred;
      transition: 0.5s;
  }
  header ul li a {
      display: block;
      padding: 21px;
      font-size: 1.1em;
      text-decoration: none;
  }
  .content{
      width: 90%;
      margin: 30px auto 30px;
      border: 1px solid red;
  }
  .content .main-content{
      width: 70%;
      float: left;
      border: 1px solid blue;
  }
  .content .main-content. .post{
      width: 95%;
      height: 270px;
      margin: 20px auto;
      border-radius: 5px;
      background: white;
      position: relative;
  }
  .content .main-content. .post .read-more{
      position: absolute;
      bottom: 10px;
      right: 10px;
      border: 1px solid #a94442;
      background: transparent;
      border-radius: 0px;
      color: #a94442 !important;
  
  }
  .content .main-content. .post .read-more{
      background: #a94442;
      color: white !important;
      transition: .25s;
  }
  .content .main-content .post .post-image{
      width: 40%;
      height: 100%;
      float: left;
  }
  .content .main-content. .post .post-preview{
      width: 60%;
      padding: 10px;
      float: right;
  
  }
  .content .sidebar{
      width: 30%;
      float: left;
      border: 1px dashed green;height: 300px;
  }
  .clearfix::after{
      content: '';
      display: block;
      clear: both;
  }
  .btn{
      padding: .5rem 1rem;
      background: #a94442;
      color: white;
      border: 1px solid transparent;
      border-radius: .25rem;
  }
  .btn:hover{
      color: white !important;
      background: darkred;
  }
  .content .main-content .recent-post-title{
      margin: 20px;
  }
  </code></pre>