css中导航栏遮挡网页信息问题（固定导航栏问题）

问题：

一开始写导航栏的时候写完发现导航栏会把商品遮盖掉，即使是把导航栏设置为一个单独的层但是还是会遮挡，上下导航栏都是一样的效果，下面代码导航栏的效果就像下面图片上一样

<div class="container-fluid text-white" >
            <nav class=" navbar-expend-sm bg-dark fixed-top">    <!--固定上导航栏-->
                <p class="text-center">
                    商品列表
                    <span class="float-right">
                        <a href="#" class="text-white">登录</a>
                    </span>
                </p>
            </nav>
        </div>

 

解决方法：

在导航栏的下一个层的 div 中加上 style="margin-top: 40px" 

这样就可以给导航栏留出位置，就不会出现遮盖网页内容的情况了。

完整网上商城网页：https://blog.csdn.net/wan_ide/article/details/102608737