how to remove left padding or left empty space ? in asp.net layout?

I am making a system to view the db on the web but

db columns are buried to the right because of the empty space on the left How to solve this

All css is applied.

I know it's a css problem, and I think it's a problem in the lower menu of _Layout, but I don't know exactly what the problem is.

this project is made blazor server but i use only razor page

this current page cshtml

@page "/MyPage/Leader"
@model WebApplication1.Pages.Mypage.LeaderModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers


@{
    Layout = "_Layout";
}
  <tbody>
            @foreach (var item in Model.borad_tbl)
  ........

this is layout


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebRP</title>
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

</head>


<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <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-page="">MyPage</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">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

css

site css

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;

}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Solution

If you want to remove the empty space on the left,Try to add the following code to your layout:

<style>
    .container {
        margin-left:0px;    
    }
</style>

Update:

You need to make sure you add the css into layout:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebRP</title>
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

</head>


<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <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-page="">MyPage</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">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    </body>
</html>
<style>
    .container {
        margin-left:0px;    
    }
</style>

With the css: