How to fix stock css on Microsoft Web Core Application?

Iam trying to make my first website using asp.net,c#,html,css and some js.Iam new to making a ASP.NET Core web application and i have most of it finished however I've come across a styling issue,where I cannot fit the size of some of the elements to the fill width of the screen.Ive tried the css + html code separately to the ASP.NET and it works fine.Thanks it advance.

https://ibb.co/g7dx3gC - Link to ASP.NET version
https://ibb.co/93JCvKB - Picture of the Html/CSS of the ASP.NET
https://ibb.co/9rVDKvy - Working one with elements taking full screen size

--HTML FOR THE SHARED LAYOUT OF ALL PAGES ON THE ASP.NET VERSION--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MJ</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MJ</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <partial name="_LoginPartial" />
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Confessions" asp-action="Index">Jokes Bank</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <!--Scroll bar-->
    <div id="progressbar"></div>
    <div id="scrollPath"></div>

    <!--website footer-->
    <div class="footer">
        <div class="copyright">&copy; 2020 Copyright mathewsjoy.co.uk.</div>
        <div class="email"><a href="mailto:mathews2492@gmail.com">Contact me via email⠀⠀</a></div>
        <label for="file">Website:</label>
        <progress id="file" value="20" max="100"> 20% </progress>
    </div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>

--HTML FOR THE STOCK VERSION THAT WORKS--

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Mathews Joy</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <!--Scroll bar-->
    <div id="progressbar"></div>
    <div id="scrollPath"></div>

    <div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="https://www.facebook.com/profile.php?id=100012684182117" target="_blank">Facebook Page</a>
                </div>

                <div class="nav-link-wrapper">
                    <a href="https://www.instagram.com/?hl=en" target="_blank">Instagram Page</a>
                </div>

                <div class="nav-link-wrapper">
                    <a href="https://www.linkedin.com/in/mathews-joy/" target="_blank">LinkedIn Page</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    MATHEWS JOY
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <div class="portfolio-items-wrapper">

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/white.jfif)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network2.png">
                        </div>

                        <div class="subtitle">
                            Technology Intership at the Bright Network (December 2020)
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/win.jfif)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network6.png">
                        </div>

                        <div class="subtitle">
                            Certications completed during time at university (2020 - 2023)
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/team.jfif)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network1.png">
                        </div>

                        <div class="subtitle">
                            Volunteering and Work Experiences oppertunities taken
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio2.jpg)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network4.png">
                        </div>

                        <div class="subtitle">
                            Offical LinkedIn Account - Started in 2020
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio3.jpg)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network3.png">
                        </div>

                        <div class="subtitle">
                            This will be another tab for something else to add
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">
                            <img src="images/network5.png">
                        </div>

                        <div class="subtitle">
                            This will be another tab for something else to add
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="parent">
        <div class="p1">
            <h1>Black Panthers</h1>
            <p>A Black Panther is the melanistic colour variant found in members of the genus <i>Panthera</i>, 
            particularly of the leopard <i>(P. pardus)</i> in Asia and Africa, and the jaguar <i>(P. onca)</i> in the Americas. 
            Black panthers of both species have excess black pigments, but their typical spotted markings are 
            also present.They are just too cool for school.</p>
        </div>
        <div class="panther">
            <img src="images/bp.png" alt="Black Panther" width="280" height="280">
        </div>
    </div>

    <div id="parent2">
        <div class="aboutme">
            <h1>About Me</h1>
            <p>Iam a student at the University of Lincoln studying Computer Science (first year).
                A hard-working, responsible and enthusiastic learner. 
                Currently I'm keen to find a part-time job/summer internship or a volunteering experience. 
                Always motivated with a willingness to learn new attributes and obtain new business experience.
            </p>
        </div>
        <div class="pictureofme">
            <img src="images/fb.png" alt="Avatar" width="300" height="300">
        </div>
    </div>

    <!--Most Used Sites Section-->
    <div class="wrapper">
        <h1>Most Used Websites</h1>

        <div class="sites">
            <div class="websites">
                <div class="site_img">
                    <a href="https://www.youtube.com/"><img src="images/yt.png" alt="youtube"></a>
                </div>
                <h3>Youtube</h3>
                <p class="role">Entertainment</p>
                <p>YouTube allows users to upload, view, rate, share, add to playlists, report, 
                    comment on videos, and subscribe to other users. Available content includes 
                    video clips, TV show clips, music videos, short and documentary films, audio 
                    recordings, movie trailers, live streams, video blogging, short original videos, 
                    and educational videos.</p>
            </div>
            <div class="websites">
                <div class="site_img">
                    <a href="https://www.bbc.co.uk/news"><img src="images/bbc1.png" alt="bbc"></a>
                </div>
                <h3>BBC News</h3>
                <p class="role">News</p>
                <p>BBC News is an operational business division of the British Broadcasting Corporation
                    (BBC) responsible for the gathering and broadcasting of news and current affairs. 
                    The department is the world's largest broadcast news organisation and generates about 
                    120 hours of radio and television output each day.</p>
            </div>
            <div class="websites">
                <div class="site_img">
                    <a href="https://www.tiktok.com/"><img src="images/tiktok.png" alt="tiktok"></a>
                </div>
                <h3>TikTok</h3>
                <p class="role">Social Media</p>
                <p>The social media platform is used to make a variety of short-form videos,
                    from genres like dance, comedy, and education, that have a duration from three
                    seconds to one minute (three minutes for some users).TikTok is an 
                    international version of Douyin, which was originally released in the Chinese market
                    in 2016.</p>
            </div>
        </div>
    </div>

    <!--website footer-->
    <div class="footer">
        <div class="copyright">&copy; 2020 Copyright mathewsjoy.co.uk.</div>
        <div class="email"><a href="mailto:mathews2492@gmail.com">Contact me via email.</a></div>
        <label for="file">Website:</label>
        <progress id="file" value="20" max="100"> 20% </progress>
    </div>

</body>
<!-- Java script code form here on -->
<script src="index.js"></script>
</html>