bootstrap card-body width extended past card header and footer

Question

The header and footer of the card is a little less then the body. Showing a little white on both sides. How do I stretch the header and footer so that it fills to the sides?

Thank you.

code snippet:

<div class="container mt-3">

    <div class="row justify-content-md-center">
        <div class="btn btn-secondary btn-md">
            <%= link_to  "Edit User Profile", edit_user_path(@user.id), style: 'color:#FFFFFF' %>
        </div>
    </div>
    <h2 class="text-center mt-4">Articles</h2>

    <% @user.articles.each_slice(3) do |articles| %>
        <div class="row">
        <% articles.each do |article| %>
        
            <div class="card col-4 shadow rounded">
                <%= link_to  "", article_path(article.id), class:"stretched-link" %>
                <div class="card-header font-italic">
                    by <%= article.user.username %>
                </div>
                <div class="card-body mt-4 mb-5">
                    <h5 class="card-title"><%= article.title%></h5>
                    <p class="card-text"><%= truncate(article.description, length:100) %></p>
                </div>
                <div class="card-footer text-muted">
                    <small>Created <%= time_ago_in_words(article.created_at) %> ago, edited <%= time_ago_in_words(article.updated_at) %></small>
                </div>        
            </div>
        <% end %>
        </div>
    <% end %>
</div>

Answer 1

Instead of having both "card" and "col-4" classes applied to the same DIV like this:

<div class="row">
    <div class="card col-4">
        <div class="card-header">
            Title 1
        </div>
        <div class="card-body">
            Body 1
        </div>
    </div>

    <div class="card col-4">
        <div class="card-header">
            Title 2
        </div>
        <div class="card-body">
            Body 2
        </div>
    </div>
</div>

If you instead wrap each of the cards with a div that applies "col-4" like below, it should allow the header and footer to be the full width of the card:

<div class="row">
    <div class="col-4">
        <div class="card">
            <div class="card-header">
                Title 1
            </div>
            <div class="card-body">
                Body 1
            </div>
        </div>
    </div>

    <div class="col-4">
        <div class="card">
            <div class="card-header">
                Title 2
            </div>
            <div class="card-body">
                Body 2
            </div>
        </div>
    </div>
</div>