Кнопки начальной загрузки не выровнены в одной строке при расширенном просмотре

Question

У меня есть 7 кнопок в одном ряду, когда я расширяю вид, они все вместе занимают только половину вида.

Я хочу, чтобы кнопки располагались в одном ряду и расширялись с расширением представления.

Кроме того, "offset-1" занимает так много места, что я хочу его меньше.

Полный код здесь https://codepen.io/tarekhassab/pen/ZMajop?editors=1000

<div class='container'>
<button type="button"  value="" class='btn btn-primary'> All news </button>
<button type="button" value="Technology" class='offset-1 btn btn-primary'> Technology </button>
<button type="button"  value="Business" class='offset-1 btn btn-primary'> Business </button>
<button type="button"  value="Science" class='btn btn-primary'> Science </button>
<button type="button"  value="Entertainment" class='btn btn-primary'> Entertainment </button>
<button type="button"  value="Health" class='btn btn-primary'> Health </button>
<button type="button"  value="Sports" class='btn btn-primary'> Sports </button>
</div>

Answer 1

Я решил это, добавив text-center

<div class='container text-center'>
<button type="button"  value="" class='btn btn-primary'> All news </button>
<button type="button" value="Technology" class='offset-1 btn btn-primary'> Technology </button>
<button type="button"  value="Business" class='offset-1 btn btn-primary'> Business </button>
<button type="button"  value="Science" class='btn btn-primary'> Science </button>
<button type="button"  value="Entertainment" class='btn btn-primary'> Entertainment </button>
<button type="button"  value="Health" class='btn btn-primary'> Health </button>
<button type="button"  value="Sports" class='btn btn-primary'> Sports </button>
</div>