Оптимизировать ширину объектов

Question

Утро

Мне было интересно, смог ли кто-нибудь дать мне несколько советов по поводу размера объекта.

Я использую опрос в любом месте и хотел создать вопрос стиля matrix.grid,однако это не встроенная функция.

Поэтому, зная очень мало CSS, я потратил последние несколько недель, пытаясь заставить вопрос выглядеть так, я почти на той стадии, когда я доволен результатами..

Пожалуйста, посмотрите пример здесь: https://s.surveyanyplace.com/s/sbkjpfqb?mode=preview&token=ad21a7bdc1f6354bae5d743659e91b11

У меня проблема с выравниванием столбцов. Как только я уменьшу размер экрана, выравнивание исчезнет.Я изумил все, что могу придумать, и попробовал все на своем уровне, но не знаю, как это исправить.

Я хочу, чтобы строки были равной (в данном случае 25%) шириной ширинывнутренний контейнер или div.answers-container.container.Но я не уверен, что это можно или нужно сделать.

Спасибо за любые советы, которые вы можете дать.пожалуйста, смотрите код, который я создал ниже.

    #question-2 .text-choice .answer,
    #question-3 .text-choice .answer,
    #question-4 .text-choice .answer,

#question-5 .text-choice .answer {
    height: 20px;
    display: inline-grid;
    vertical-align: top;
    text-align:center;
}
#question-2 .text-choice .answer .answer-content,
#question-3 .text-choice .answer .answer-content,
#question-4 .text-choice .answer .answer-content,
#question-5 .text-choice .answer .answer-content {
    border: none;
    padding: 0.5cm 0 0 0;
}
#question-2 .text-choice .radio:checked + .answer-content,
#question-3 .text-choice .radio:checked + .answer-content,
#question-4 .text-choice .radio:checked + .answer-content,
#question-5 .text-choice .radio:checked + .answer-content {
    background: none;
    color: inherit;
}

#question-2 .text-choice .radio:checked + .answer-content:before,
#question-3 .text-choice .radio:checked + .answer-content:before,
#question-4 .text-choice .radio:checked + .answer-content:before,
#question-5 .text-choice .radio:checked + .answer-content:before {
    content: '';
    display: none;
}
#question-2 .text-choice .answer label,
#question-3 .text-choice .answer label,
#question-4 .text-choice .answer label,
#question-5 .text-choice .answer label {
    display: none;
}
/* force rows label to be a fixed width */
#question-2 .card-content-item > div.text-container.container > div,
#question-3 .card-content-item > div.text-container.container > div,
#question-4 .card-content-item > div.text-container.container > div,
#question-5 .card-content-item > div.text-container.container > div {
    width:70vmin;
}
/* force rows to be a fixed uniform height */
#question-2 .card-content-item,
#question-3 .card-content-item,
#question-4 .card-content-item,
#question-5 .card-content-item {
    display: inline-grid;
    width: 100vmin;
}

/* hide labels and add fixed width to each answer for alignment of columns */
#question-3 .answer-content,
#question-4 .answer-content,
#question-5 .answer-content {
    font-size: 0;
    width: 12.5vmin;
   }

/* dummy question - labels */
#question-2 .answer-content {
    width: 12.5vmin;
    text-align: center;
    font-size: 12px;
    color: #fcd404;
}

/* dummy question - hide radio btn */
#question-2 .text-choice .answer {
    background: none;
}

/* dummy question - add space at bottom of radio labels column headers */
#question-2 {
    margin-bottom: -20px; 
}

/* don't show hr line */
hr {
    opacity: 0;
    margin-bottom: -10px
}

/* don't show hr margin*/
.theme-font-size-small hr {
    margin: 0;
}

/* less margin above radio button to that it can align to top of row */
#question-2 .card-content .container + div, .card-content .container > .container, 
#question-3 .card-content .container + div, .card-content .container > .container,
#question-4 .card-content .container + div, .card-content .container > .container,
#question-5 .card-content .container + div, .card-content .container > .container {
    margin-top: 0;
}
#question-2 .radio:checked,
#question-3 .radio:checked,
#question-4 .radio:checked,
#question-5 .radio:checked {
background: red !important;
height: 18px;
width: 18px;
opacity: 1;border: 2px solid #ccc;
}
#question-2 .card .card-body .card-content label.answer .answer-content,
#question-3 .card .card-body .card-content label.answer .answer-content,
#question-4 .card .card-body .card-content label.answer .answer-content,
#question-5 .card .card-body .card-content label.answer .answer-content {
padding-top: 43px;
}
#question-2 .card .card-body .card-content.card-content-item,
#question-3 .card .card-body .card-content.card-content-item,
#question-4 .card .card-body .card-content.card-content-item,
#question-5 .card .card-body .card-content.card-content-item {
    width: 100%;
}
#question-2 .answer-content {
    padding-top: 20px;
}
.card .card-body .card-content #question-2 label.answer input { 
    display: none;
}