html中的width无效,css max-width失效

做了一个导航滚动到顶部冻结的效果，不过为什么.logo那里的max-width:0没有完全生效，而且当有nav-fixed属性时。logo和其他li也没对齐，这是什么原因造成的？

Document

*{

padding:0;

margin:0;

}

body{

/*transition: all .5s;*/

}

header{

background:url(../common/home_background.jpg) bottom center no-repeat;

background-position: cover;

height:30vh;

width:100%;

}

nav{

background: #ccc;

color:#fff;

position: relative;

transition: all .5s;

top:0;

width:100%;

}

ul{

list-style: none;

font-size:20px;

}

ul>li{

/*padding:5px;*/

display: inline-block;

line-height: 2;

padding:4px 10px;

}

.logo{

max-width:0;

max-height:1em;

overflow: hidden;

transition: all .5s ease;

}

body.nav-fixed nav{

position: fixed;

}

body.nav-fixed .site-wrap{

transform: scale(1);

}

body.nav-fixed .logo{

max-height: 1em;

max-width:200px;

color:red;

}

.site-wrap{

width: 80%;

margin:50px auto;

padding: 20px;

border: 1px solid #ccc;

box-shadow: 2px 2px 10px 2px #ccc;

border-radius: 10px;

transform: scale(.98);

transition: all .5s ease;

height:800px;

}

/*transform: scale(1);*/

我是一幅图

• 我是隐藏的
• 我是部分1
• 我是部分2
• 我是部分3
• 我是部分4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore .

var nav=document.querySelector("nav");

var navTop=document.querySelector("nav").offsetTop;

var scrollTop=window.scrollY;

window.addEventListener("scroll",function(){

console.log(navTop,scrollY)

if(scrollY>=navTop){

document.body.classList.add("nav-fixed");

document.body.style.paddingTop = nav.offsetHeight + 'px';

// alert(1)

}

else{

document.body.classList.remove("nav-fixed");

document.body.style.paddingTop="0px"

}

})