bootstrapのレイアウトがスマホで観ると崩れてしまう。

現在以下のサイトを運営しており、PCで観ると正常にCardが真ん中に並んでいます。
ザツバコ
しかし、スマホで観るとMDbootstrapのCardが画面からはみ出してしまいます。

スマホで観た場合でもCardがはみ出ないようにしたいです。
よろしくお願いします。

mdbootstrap：4.8.11

index.blade.php

@extends('app')

@section('title', '投稿一覧')

@section('content')
　@include('nav')
 <div class="d-flex flex-column">
   <div class="text-center p-3 bd-highlight">
     <h3>新着雑学</h3>
   </div>
   <hr>
   <div class="col-md">
    @foreach($articles as $article)   // ここでCardを表示


    @include('articles.card')
    @endforeach
  </div>

 </div>

@endsection

card.blade.php

<div class="card mt-3 mx-auto border-warning" style="width: 40rem">
  <div class="card-body d-flex flex-row">
    ~~~
    </div>

  @if( Auth::id() === $article->user_id )
    <!-- dropdown -->
      <div class="ml-auto card-text">
       ~~~~
      </div>
      <!-- dropdown -->
    @endif

  </div>
  <div class="card-footer">
   <div class="card-body pt-0">
     <h3 class="h4 card-title">
       <a class="text-dark" href="{{ route('articles.show', ['article' => $article]) }}">
         {{ $article->title }}
       </a>
     </h3>
     <div class="card-text">
      {!! nl2br(e( $article->body )) !!}
    </div>
   </div>
   <div class="card-body pt-0 pb-2 pl-3">
    <div class="card-text">
      <article-like
        :initial-is-liked-by='@json($article->isLikedBy(Auth::user()))'
        :initial-count-likes='@json($article->count_likes)'
        :authorized='@json(Auth::check())'
        endpoint="{{ route('articles.like', ['article' => $article]) }}"
      >
      </article-like>
    </div>
  </div>