CSSでの中央揃えについて

以下のようなコードで画像のようなものを実装しているのですが，
文字が青い枠の中で左に寄ってしまいます．
これはなぜでしょうか？
解決策，代替案などありましたらご教授いただけると幸いです．

画像ではjavascriptの部分を仮に表示させていますが，以下のコードでは記載しておりません．

css
1.information{
2    padding: 0.2em 0.5px;
3    margin: 2em auto;
4    background: #d6ebff;
5    box-shadow: 0px 0px 0px 10px #d6ebff;
6    border: dashed 2px white;
7    width: 600px;
8}
9
10.submission{
11  margin: 5px auto;
12  font-size: large;
13  color: #ff0000;
14  width: 200px;
15  padding: 10px;
16  text-align: center;
17  display: inline-block;
18  font-weight: bold;
19}
20
21.deadline{
22  margin: 5px auto;
23  font-size: large;
24  width: 200px;
25  padding: 10px;
26  text-align: center;
27  display: inline-block;
28  font-weight: bold;
29}

html
1<div class = "container-fluid">
2   <div class = "row">
3      <div class = "col-sm-12 col-md-12">
4         <div class = "information">
5         <div>
6            <span class = "submission">Submission Due</span>
7            <span class = "submission">11/28 (Sat) 12:00</span>
8         </div>
9         <div>
10            <span class = "deadline">Time Left</span>
11            <span class = "deadline"></span>
12         </div>
13         </div>
14      </div>
15   </div>
16</div>

kei344

2017/11/05 15:21

https://jsfiddle.net/usd1xqpr/ 書かれている状況が再現できません。CSSが他にも指定されていませんか？

ke622ken

2017/11/05 15:50

大変申し訳ございません．bootstrapのCSS指定を記載し忘れておりましたので追記しました．また，画像で表示させているJSに関するコードは省略いたしました．宜しくお願い致します．

kei344

2017/11/05 15:56

https://jsfiddle.net/usd1xqpr/1/ やはり再現しません。問題が起きるサイトのURLを提示可能でしょうか。

root_jp

2017/11/06 00:54

なるほど。確かに再現しません。submissionもdeadlineも画像の通りになりますね。

ke622ken

2017/11/06 01:30

ご迷惑お掛けしました．ありがとうございました．以後気をつけます．

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

回答2件

ベストアンサー

これはなぜでしょうか？

それはあなたがそう指定しているから、としか言いようがありません。「ここをこう指定したのになんでセンタリングにならないのか」と質問してくれればここが間違っているよと指摘できますが、ふわっとした聞き方をされたり、提示されたコードが省略されているのであれば我々は「質問文に書かれた通りのコード」の意図しか汲み取ることが出来ません。
informationの幅が600、submissionとdeadlineのそれぞれの幅が200なので、600の中に200、200の列があるのなら、右側が200余って左に寄るのは当然です。

600の中で左右に100、100の余白を持たせて配置したいのであればinformationにtext-align:centerを指定するべきで、そもそもsubmissionとdeadlineの幅を300、300にすればぴったり半分ずつ使って配置されます。

これはinformationにtext-align:centerを指定したサンプルです。
https://jsfiddle.net/1jsks822/