ボタンを横並びで中央にしたいです。

ボタンを横並びで中央にしたいです。
スマホでは縦並びに。
ボタンは画像ではなくcssを使ってつくりました。
flex使用してjustify-content: centerを入れたのですが、中央にはならず間が空いてしまいます。

html
1<div class="flex">
2　<div class="container-1">
3　<a href="#" class="btn-border">≫ よくある質問　</a>
4　</div>
5　<div class="container-1">
6　<a href="#" class="btn-border">≫ お問い合わせ　</a>
7　</div>
8

css
1.btn-border {
2  display: inline-block;
3  width:40%;
4  text-align: center;
5  border: 2px solid #9ec34b;
6  font-size: 16px;
7  color: #9ec34b;
8  text-decoration: none;
9  font-weight: bold;
10  padding: 8px 16px;
11  border-radius: 4px;
12  transition: .4s;
13}
14
15.btn-border:hover {
16  background-color: #9ec34b;
17  border-color: #cbe585;
18  color: #FFF;
19}
20
21 .flex{
22    display: flex;
23    padding: 10px;
24    justify-content: center;
25}
26    
27.flex div{
28    width: 50%;
29    margin: 10px;
30    padding: 10px;
31} 
32

お願いします。

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

回答3件

全角のスペースでインデントしてるからでは？
（更新しました）

投稿2020/07/13 00:23

編集2020/07/13 00:44

yambejp

総合スコア116724

yambejp

2020/07/13 00:45

確認するための最小限のCSS .flex{ display:flex; justify-content:center; background-Color:aqua; } .container-1:nth-child(2n){ background-Color:yellow; } .container-1:nth-child(2n+1){ background-Color:lime; }

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

ベストアンサー

やりたいのは、おそらくこういうことかな?

CSS
1* {
2  box-sizing: border-box;
3  margin: 0;
4}
5
6.btn-border {
7  display: inline-block;
8  width: 100%;
9  text-align: center;
10  border: 2px solid #9ec34b;
11  font-size: 16px;
12  color: #9ec34b;
13  text-decoration: none;
14  font-weight: bold;
15  padding: 8px 16px;
16  border-radius: 4px;
17  transition: .4s;
18}
19
20.btn-border:hover {
21  background-color: #9ec34b;
22  border-color: #cbe585;
23  color: #FFF;
24}
25
26.flex {
27  display: flex;
28  justify-content: center;
29  flex-wrap: wrap;
30}
31
32.flex div {
33  width: 30em; /* 好きな幅に */
34}