Vfrdtyky

I'm trying to make a github.io for a portfolio page. Locally testing my page seemed to work fine, but after uploading my page to github.io, the page was resized.

Should look this this

but After up loading,
The Page looks like this

I was following this template: https://colorlib.com/preview/#meetme

HTML for top:

<section class="home_banner_area">

  <div class="container box_1620" style="width: 300px; height: 300px;">

    <div class="banner_inner d-flex align-items-center">

      <div class="banner_content">

        <div class="media">

          <div class="d-flex">

             <img src="img/profile.jpg" alt="" width="45">

           </div>

           <div class="media-body">

             <div class="personal_text">

                <h6>Hello Everybody, I am</h6>

                <h3>Jhon Doe</h3>

                <h4>Full Stack Software Developer</h4>

                <p>I turn coffee into code</p>

                <ul class="list basic_info">

                  <li>email</li>

                  <li>github</li>

                  <li>linkedin</li>

                  <li>address</li>

                </ul>

                <ul class="list personal_social">

                  <li><a href="#"><i class="fa fa-github fa-2x"></a></li>                    

                  <li><a href="#"><i class="fa fa-linkedin></a></li>

                </ul>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

So far, I have tried resizing the image within the html, and have even added a resized image in the img/ folder itself. However, it seems the entire webpage is resized. E.g, anything that was aligned horizontally is now aligned vertically. Please help...