HTML5とCSS3で料金表画面を作成したい。

##前提・実現したいこと

HTML5とCSS3を使ってサブスクリプションプランの画面作成の仕方。

発生している問題・エラーメッセージ

ブラウザでの表示の違い
※Google chromeを使用しています。
パソコン上の画面では、オレンジ色の「Enter」ボタンが３つ現れるのですが、
Google Chrome>その他ツール>デベロッパーツールを開きスマホ画面に切り替えた際、
オレンジのボタンが一つしか表示されず場所も固定されてしまってます。
jqueryやscriptは、使用していません。

該当のソースコード

html5
1<!DOCTYPE html>
2<html lang="En"/>
3<head>
4    <meta charset="UTF-8"/>
5    <meta name="viewport" content="width=device-width" initialscale="1.0">
6    <link rel="stylesheet" href="css/style1.css"/>
7    <link rel="stylesheet" href="css/stylephone.css" media="screen and (max-width:767px)">
8</head>
9<body>
10    <h1>Pricing Table</h1>
11    <div class="container">
12        <div class="tab1">
13            <h2>Free</h2>
14            <hr>
15                <ul>
16                    <li>Level1</li>
17                    <li>Level2</li>
18                    <li>Level3</li>
19                </ul>
20                <button class="entry-btn1">Enter</button>
21        </div>
22        <div class="tab1">
23            <h2>$10/month</h2>
24            <hr>
25                <button class="entry-btn1">Enter</button>
26        </div>
27        <div class="tab1">
28            <h2>$100/year</h2>
29            <hr>
30                <button class="entry-btn1">Enter</button>
31        </div>
32    </div>
33</body>
34</html>

CSS3
1body{
2    margin:0px;
3}
4h1{
5    margin-top:1px;
6    margin-bottom: 5px;
7    text-align: center;
8}
9h2{
10    text-align: center;
11    font-size: 40px;
12}
13hr {
14    height: 5px;
15    background-color: red;
16    width: 60%;
17    border: none;
18   }
19.tab1{
20    background-color: white;
21    width:300px;
22    height:500px;
23    border:white solid 3px;
24    border-radius: 5px;
25    margin-top:20px;
26    margin-left:auto;
27    margin-right:auto;
28    margin-bottom: 20px;
29}
30
31.container{
32    margin:auto;
33    background-color: #EEEEEE;
34    width:auto;
35    height:auto;
36    display:flex; 
37    flex-direction: row;
38    border: #EEEEEE solid 5px;
39    justify-content: space-around;
40}
41
42.entry-btn1{
43    position: fixed;
44    margin-left:50px;
45    margin-right:50px;
46    border-radius: 50px;
47    width:200px;
48    height:50px;
49    background-color:orangered;
50    text-align: center;
51    font-size: 24px;
52         color:white;
53}
54

上記は、パソコン画面用のCSS

CSS3
1.tab1{
2    background-color: white;
3    width:300px;
4    height:640px;
5    border:white solid 3px;
6    border-radius: 5px;
7    margin-top:20px;
8    margin-left:auto;
9    margin-right:auto;
10    margin-bottom: 20px;
11}
12
13.container{
14    background-color: #EEEEEE;
15    width:auto;
16    height:auto;
17    display:flex; 
18    flex-direction: column;
19    border: #EEEEEE solid 5px;
20    justify-content: space-around;
21}
22
23.entry-btn1{
24    position: fixed;
25    margin-left:50px;
26    margin-right:50px;
27    border-radius: 50px;
28    width:200px;
29    height:50px;
30    background-color:orangered;
31    text-align: center;
32    font-size: 24px;
33         color:white;
34}

※スマホ用CSS　（下記も含む）

試したこと

html5
1 <div id="btn1">
2   <button class="entry-btn1">Enter</button>
3 </div>

class属性でボタンを作るだけにしてid属性で配置させようとしましたが変化がありませんでした。

CSSを試してみましたが変化がありませんでした。

CSS
1.entry-btn1{
2    background-color:orangered;
3    width:200px;
4    height:50px;
5    text-align: center;
6    font-size: 24px;
7         color:white;
8}
9#btn1{
10    position: fixed;
11    margin-left:50px;
12    margin-right:50px;
13    border-radius: 50px;
14}
15#btn2{
16        position: fixed;
17        margin-left:50px;
18        margin-right:50px;
19        border-radius: 50px;
20}

補足情報（FW/ツールのバージョンなど）

使用ブラウザ：Google Chrome
英語表記に特に意味はありません。

ここにより詳細な情報を記載してください。

kei344

2020/05/09 14:04

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

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

回答1件

html5
1<input type="button" class="entry-btn1" value="Enter">

<button>タグを使わなければ通常通りできました。
それとCSSの変更

CSS
1.entry-btn1{
2    width:200px;
3    height:50px;
4    background-color: orangered;
5    border:white solid 3px;
6    border-radius: 50px;
7    margin-left: 50px;
8    margin-right: 50px;
9    font-size:24px;
10         color:white;
11}