chrome page output is not the same as wordpress customizer

Envato Authors ThemeForest
#1

i have set an element to margin-bottom: 100px, but the rusults on chrome and wordpress customizer are not the same:

wp outputs :

wp
wp350×506 8.57 KB

chrome output
chrome

the styling

@media screen and (max-width: 650px) {
        .nav-posts {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 100px;
        }
    }
#2

the problem was on admin header wish appering at the bottom