在我的 html 导航栏中我的酒吧贴在页边距的左边我该如何补救？

如何解决在我的 html 导航栏中我的酒吧贴在页边距的左边我该如何补救？

当我使用记事本++时，它工作得很好。但是当在 VS 中使用 asp.net wep 应用程序时，它会这样做：

即使边距设置为 0，导航栏也会突出显示。

默认情况下，visual studio 中是否有执行此操作的功能？提前致谢！

这是 HTML 和 CSS：

body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    Box-shadow: 0 0 3px rgba(0,0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: Nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

    .nav__link:hover {
        background-color: #eeeeee;
    }

.nav__link--active {
    color: #009578;
}

.nav__icon {
    font-size: 18px;
}

<html>
<head>
    <title>
        Bottom Nav Bar

    </title>
    <Meta name="viewport" content="width=device=width,initial scale=1.0" />
    <Meta charset="utf-8" />
    <link rel="shortcut icon" href="/assets/favicon.ico">
    <link href="/assets/favicon.ico" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="./css/nav.css">

</head>

<body>
 
    <nav class="nav">
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">dashboard</i>
        <span class="nav__text">Dashboard</span>
    </a>
    <a href="#" class="nav__link nav__link--active">
        <i class="material-icons nav__icon">person</i>
        <span class="nav__text">Profile</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">devices</i>
        <span class="nav__text">Devices</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">lock</i>
        <span class="nav__text">Privacy</span>
    </a>
    <a href="#" class="nav__link">
        <i class="material-icons nav__icon">settings</i>
        <span class="nav__text">Settings</span>
    </a>
</nav>

</body>


</html>

正如你所知，我也输入了 html。出于某种原因，它不允许我这样做。有谁明白为什么这不起作用？

解决方法

还没有尝试过，但尝试将 left:0; 添加到 .nav，所以它看起来像：

.nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0,0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}