inline-blockでボタンを横並びにできない

【登録はこちらのボタンを横並びにしたい】

試したこと

横並びにしたいdivタグを子要素にした
「inline-block　横並びできない」で検索
「inline-block 使い方」で検索

4.このサイトで上記のワードで検索

→2番に対処法が書いてあったのかも知れないですが、よくわかりませんでした。

ーー追記

調べるとfrotでも横並びにできると書いてあったのですが、今回はどうしてもcssとhtmlだけで解決したいです。
お手数ですがよろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>cssの練習</title>
6  <link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9  <h1>maintitle</h1>
10  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
11  <h2>sabtitle</h2>
12  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
13    <div class="btn">登録はこちら</div>
14    <div class="btn2">登録はこちら</div>
15</body>
16</html>

CSS
1/* 青色のボタンにカーソルを合わせると指のマークが表示 */
2/* ボタンを2つを縦におく */
3.btn {
4  width: 120px;
5  background-color: skyblue;
6  color: white;
7  padding: 16px;
8  text-align: center;
9}
10
11.btn:hover {
12  cursor: pointer;
13  opacity: 0.8;
14}
15
16.btn2 {
17  display:inline-block;
18  width: 120px;
19  background-color: skyblue;
20  color: white;
21  text-align: center;
22  padding: 16px;
23}
24

行動規範の内容に同意します

回答1件

ベストアンサー

そのやり方で横並びするには両方がinlineでないと並びません。

CSS
1.btn {
2  width: 120px;
3  background-color: skyblue;
4  color: white;
5  padding: 16px;
6  text-align: center;
7  display:inline-block; /* ADD */
8}
9```**動くサンプル：**[https://jsfiddle.net/05vnLmqg/](https://jsfiddle.net/05vnLmqg/)