Padding/Margin/shadows disappear in desktop view but show in inspect. Bug persists across all screen-CodePudding

Working on a sample portfolio site for school, front end is admittedly my week spot. When I load the site normally it doesn't show any padding or margin, but when I got to use inspect at the max size down to the breakpoint it looks much better, with margin and padding and better shadows.

 CSS 
     .neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<!-- HTML -->
    <div  id="cover">
    <!-- NAVIGATION -->
        <div >
            <nav >
                <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span >
                        <i ></i>
                    </span>
                </button>
                <div >
                    <ul >
                        <li >
                            <a  href="#portfolio">Portfolio</a>
                        </li>
                        <li >
                            <a  href="#about">About</a>
                        </li>
                        <li >
                            <a  href="#projects">Gallery</a>
                        </li>
                        <li >
                            <a  href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div >
            <div >
                <div >
                    <div  style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div  style="font-size: 5vw"> Full-Stack Developer</div>

                    <div >
                        <a   href="#portfolio">See My Work</a>
                        <a   href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div >
                    <div >Placeholder</div>
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

Try using this cdn, you probably have some problem with installation

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

.neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- HTML -->
    <div  id="cover">
    <!-- NAVIGATION -->
        <div >
            <nav >
                <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span >
                        <i ></i>
                    </span>
                </button>
                <div >
                    <ul >
                        <li >
                            <a  href="#portfolio">Portfolio</a>
                        </li>
                        <li >
                            <a  href="#about">About</a>
                        </li>
                        <li >
                            <a  href="#projects">Gallery</a>
                        </li>
                        <li >
                            <a  href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div >
            <div >
                <div >
                    <div  style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div  style="font-size: 5vw"> Full-Stack Developer</div>

                    <div >
                        <a   href="#portfolio">See My Work</a>
                        <a   href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div >
                    <div >Placeholder</div>
                </div>
            </div>
        </div>
    </div>