Materialize CSS Modal shifts body contents to the right
<p>I'm new here in this community.</p>

<p><strong>Main Contents :</strong></p>

<p><a href="https://i.stack.imgur.com/yjmCl.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/yjmCl.jpg" alt="enter image description here"></a></p>

<p><strong>Triggered Modal :</strong></p>

<p><a href="https://i.stack.imgur.com/w4o0A.png" rel="nofollow"><img src="https://i.stack.imgur.com/w4o0A.png" alt="enter image description here"></a></p>

<p>The first picture shows the main contents of my page. The 2nd picture shows that the content (schedule card panel) extends/shifts to the right. CSS padding and overflow didn't solve my problem. </p>

<p>What should I do?</p>

<p>This is my complete CSS for this particular file:</p>

<pre><code>&lt;style&gt;
    body
    {
        background-color: #f1f1f1 !important;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        padding-left: 240px;
    }
    main 
    {
        flex: 1 0 auto;
    }
    header
    {
        margin-bottom: 2% !important;
    }
    #nav-wrapper
    {
        padding-top: 0.4%;
        background-color: #1976d2 !important;
    }
    a .men
    {
        padding-top: 0.8%;
        font-size: 2.8rem;
        z-index: 0;
    }
    @media only screen and (max-width : 992px) 
    {
     body 
     {
        padding-left: 0;
     }
    }

    ul .activeTab a
    {
        background-color: #ccc !important;
    }
    ul li a:hover
    {
        background-color: #f1f1f1 !important;
    }
    .chPassHeader
    {
        font-size: 1.2rem;
    }
&lt;/style&gt;
</code></pre>

<p>This is my Modal </p>

<pre><code>&lt;!-- START : CHANGE PASSWORD MODAL--&gt;
    &lt;div id="chPassModal" class="modal animated fadeIn"&gt;

        &lt;div class="modal-content"&gt;
          &lt;span class="chPassHeader"&gt;&lt;i class="material-icons left"&gt;mode_edit&lt;/i&gt; CHANGE PASSWORD&lt;/span&gt;
          &lt;div class="divider"&gt;&lt;/div&gt;
          &lt;p&gt;A bunch of text&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="modal-footer"&gt;
            &lt;a class="modal-action modal-close btn-flat"&gt;Cancel&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- END : CHANGE PASSWORD MODAL--&gt;
</code></pre>