作成したform　ファイルをアップロードをする際に表示される「ファイルを選択」部分が中央揃えにならない

お世話になります。非常に困っています。よろしくお願いいたします。

#やりたいこと　左揃えの「ファイル選択」を中央揃えにしたい。

具体的に説明します。

#できないこと　以下画像のように[ファイルを選択]の部分が左揃えになってしまい困ってます。

上記のようにファイルを選択　や　選択されていません　が左揃えになってしまいます。これを中央揃えにしたいです。

#できたこと　ためしたこと

該当箇所をchromeの検証で調べてみました。該当のCSS部分を以下のように修正すると中央揃えになりました。

以下の４つを無効にすると、中央揃えになる事を確認しています。

具体的には以下を全部無効にした時だけ中央揃えになります。どれか１つでも有効だと中央揃えにはならず、左揃えになります。

.form-control-file, .form-control-range {
    /* display: block; */
    /* width: 100%; */
}

.form-control-file, .form-control-range {
    /* display: block; */
    /* width: 100%;

無効にすれば中央揃えになると思い以下を追記しましたが左揃えのままとなっています。

.formInner{
display:inherit;
width:inherit;

#　html

<form class="mx-auto text-center formInner" action="" method="POST" enctype='multipart/form-data'>
		{{ form.non_field_errors }}
		{% for field in form %}
		<div class="form-group">
		<label for="{{field.id_for_label}}">{{ field.label_tag }}</label>
			{{ field }}
		　　　　{{ field.errors }}
	　　　　</div>
		{% endfor %}
		{% csrf_token %}
</form>

#　CSS

.formInner{
display:inherit;
width:inherit;
}

.form-group {
  font-size: 12px;
  /* text-align: center; */

}
.form-control-file{
  font-size: 12px;
  /* text-align: center; */
}

初心者の為大変稚拙な内容となり申し訳ありませんがよろしくお願いいたします。