导航栏宽度超过网页的视口答案

【问题标题】：navbar width exceeds viewport of webpage导航栏宽度超过网页的视口
【发布时间】：2017-08-14 13:45:39
【问题描述】：

大家好，我想显示 html 内容，边距为 50px &50px。这是我的导航栏 witdh 设置为 100% 然后它伸长到右端但正确定位在左边的问题
我给了下图：like this

我展示了 html&css

css:

<style>
            .top{
                width:100%;
                height:300px;
                color:#ccc;
                font-size: 40px;
                text-align: center;
                background-color: forestgreen;
            }
            .align{
                height:100%;
                margin-left: 50px;
                margin-right: 50px;
                background-color: darkgray;
            }
            ul{
                position: absolute;
                width:100%;
                list-style-type: none;
                overflow: hidden;
                background-color: black;
                color: azure;
                float:left;
                padding: 0;
            }
            nav{
                position: inherit;
            }
            li{
                text-decoration: none;
                padding: 14px 16px;

                display: block;
                float: left;
                margin: none;
                text-align: center;
            }
            li.active{
                background-color: darkred;
            }
            .navbar-fixed {
                  top: 0;
                  z-index: 100;
                  position: fixed;
                  width: 100%;
            }
        </style>

HTML：

<body class="bg-danger">
        <div class="align bg-success" >
            <div id=image-header class=top>
        NO:1 Hosting Site 
            </div>
        <nav   >
            <ul>
                <a href="index.php"><li class="active">
                    Home

                </li></a>

                <a href="login.php"><li>
                    Login
                </li></a>

                <a href="registration.php"><li>
                    Register
                    </li></a>

                <a href="account.php"><li >           
                    Profile
                </li></a>
            </ul>
            </nav>

            </div>
    </body>

我希望它像这样修复它（我使用了 92.5% 的宽度）和 100% 的宽度 this is just model like affix in bootstrap 并想知道为什么它不能在 div 元素中 100% 修复图片

【问题讨论】：

请edit你的问题标题有意义。很明显，它与您添加的标签中的 HTML/CSS 有关，很明显您需要帮助，否则您不会在这里发布。删除该信息会使您的标题变得毫无用处。您的标题应该以足够清晰的方式描述问题或疑问，以供将来在搜索结果列表中看到它的读者使用。谢谢。
@KenWhite 我更新了问题:) 晚了

标签： html css navbar

【解决方案1】：

您可以在该导航栏上使用width: calc(100% - 100px); 来获得正确的宽度。

【讨论】：

这里的100px是什么意思
边距：50px + 50px = 100px。所以宽度将是视口的 100% 减去左右边距之和。
我不明白你的意思。试试吧，你会看到的。