Форумы портала PHP.SU :: Верстка страницы отображается без пробелов

Всем привет!

Взгляните пожалуйста на верстку страницы http://vtasks[dot]my-demo-apps[dot]tk
Далее клик на элементе меню “events”

Я делаю с помощью списков (vue/cli 4 / Bootstrap 4.3 /flexbox) данные в 2 колонки и
проблема в том в тексте пробелы между лейблом и данными не отображаются: https://prnt[dot]sc/q89s1i
Верстка :

CODE (html):
скопировать код в буфер обмена

                <ul class="column_content_left_aligned">
                        <li class="p-3" v-if="nextEvent.task_name">
                                <i :class="'i_link '+getHeaderIcon('task')" title="Event related task"></i>
                                <router-link :to="{ name: 'taskDetails', params: { slug: nextEvent.task_slug }  }" class="p-3 a_link" target="_blank">
                                        <strong>{{ nextEvent.task_name }}</strong>
                                </router-link>
 
                        </li>
 
                        <li class="p-3">
                                Starts at <strong>{{ momentDatetime(nextEvent.at_time, jsMomentDatetimeFormat) }}</strong>
                        </li>
                        <li class="p-3 row_content_left_aligned" style="display: flex;align-self: flex-start">
                                <ul class="row_content_left_aligned">
                                        <li class="row_content_left_aligned">
                                                Duration <strong>{{ nextEvent.duration }}</strong> min
                                        </li>
 
                                        <li class="row_content_right_aligned">
                                                <strong>{{ getDictionaryLabel( nextEvent.access, eventAccessLabels ) }}</strong>&nbsp;access
 
                                        </li>
                                </ul>
                        </li>
 
                </ul>
 
 