HTML Button Not Taking Up Full Width of Parent Div

Question

I have an area on my website where events are listed. I have a parent div for the container and a div for each event section. When the user hovers over the section, an edit and delete button pops up on the left:

The problem is the button isn't taking up the full width of the div, but only is as long as the text is. I know other questions have been asked, but none of the answers, such as adding box-sizing: border-box, work for me.

HTML code:

<div class="col-md-6 inline mb-4">  
    <h3 class="ml-2">Reminders:</h3>
    <div class="events-content-section ml-2">
        {% for reminder in reminders %}   
            <div class="mb-2" style="display: flex; align-items: center;">
                <ul class="reminderUl">
                    <li>
                        <span class="reminderSpan">
                            <button type="button" class="update-reminder btn btn-info" data-id="{% url 'update-reminder' reminder.pk %}"> 
                                <i class="fas fa-pencil-alt"></i>   
                            </button>
                        </span>
                        <span class="reminderSpan">
                            <button type="button" class="delete-reminder btn btn-danger" data-id="{% url 'delete-reminder' reminder.pk %}">
                                <i class="fas fa-trash-alt"></i>    
                            </button>
                        </span>
                        <button class="view-reminder btn btn-light" data-id="{% url 'view-reminder' reminder.pk %}">   
                            <h4>{{ reminder.title }}</h4>
                        </button>
                    </li>
                </ul> 
            </div>
        {% endfor %}    
    </div> 
</div>

Answer 1

Being that you're already using Bootstrap I recommend using the btn-block class.