クラス名が理解できない

疑問点

下記の画像のように緑色のさっそく開発するという部分の幅を
100％に広げたいのですが
CSSの答えを見ると、
.message-wrapper .btn {
width: 100%
}
となっています。
さっそく開発するのクラス名はbtn messageですので
.messageがクラス名だと思うのですが
どうして、.message-wrapper .btnがクラス名になるのでしょうか？
プログラミングを始めたばかりで
初歩的な所でつまずいています。

よろしければ、回答よろしくお願いします。

実際の画像

コード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
10  </head>
11  <body>
12    <header>
13      <div class="container">
14        <div class="header-left">
15          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16        </div>
17        <span class="fa fa-bars menu-icon"></span>
18        
19        <div class="header-right">
20          <a href="#">レッスン</a>
21          <a href="#">新規登録</a>
22          <a href="#" class="login">ログイン</a>
23        </div>
24      </div>
25    </header>
26    <div class="top-wrapper">
27      <div class="container">
28        <h1>LEARN TO CODE.</h1>
29        <h1>LEARN TO BE CREATIVE.</h1>
30        <p>Progateはオンラインプログラミング学習サービスです。</p>
31        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
32        <div class="btn-wrapper">
33          <a href="#" class="btn signup">新規登録はこちら</a>
34          <p>or</p>
35          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
36          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
37        </div>
38      </div>
39    </div>
40    <div class="lesson-wrapper">
41      <div class="container">
42        <div class="heading">
43          <h2>Learn Where to Get Started!</h2>
44        </div>
45        <div class="lessons">
46          <div class="lesson">
47            <div class="lesson-icon">
48              <img src="https://prog-8.com/images/html/advanced/html.png">
49              <p>HTML & CSS</p>
50            </div>
51            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
52          </div>
53          <div class="lesson">
54            <div class="lesson-icon">
55              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
56              <p>jQuery</p>
57            </div>
58            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
59          </div>
60          <div class="lesson">
61            <div class="lesson-icon">
62              <img src="https://prog-8.com/images/html/advanced/ruby.png">
63              <p>Ruby</p>
64            </div>
65            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
66          </div>
67          <div class="lesson">
68            <div class="lesson-icon">
69              <img src="https://prog-8.com/images/html/advanced/php.png">
70              <p>PHP</p>
71            </div>
72            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
73          </div>
74        </div>
75        <div class="clear">
76          
77        </div>
78        
79      </div>
80    </div>
81    <div class="message-wrapper">
82      <div class="container">
83        <div class="heading">
84          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
85          <h3>Let's learn to code, learn to be creative!</h3>
86        </div>
87        <span class="btn message">さっそく開発する</span>
88      </div>
89    </div>
90    <footer>
91      <div class="container">
92        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
93        <p>Learn to code, learn to be creative.</p>
94      </div>
95    </footer>
96  </body>
97</html>