激活媒体查询时，如何使媒体查询外的命令不运行?

Question

我有这个导航栏我把最后一个元素设置为margin-right: 0但是当媒体查询运行时，我看到导航栏弹出，看到最后一个项目也应用了margin-right: 0，我不希望这样。我该如何解决这个问题?我不确定是否要在这里插入所有的代码

.navbar {
font-size: 30px;
padding: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: auto;
background: rgb(255, 236, 65);
}
.list {
list-style-type: none;
}
.list-item {
display: inline-block;
margin-right: 40px;
}
.list-item:nth-child(4) {
margin-right: 0;
}

@media all and (max-width: 650px) {
.navbar {
flex-direction: column;
}

.list {
width: 100%;
text-align: center;
display: none;
}
.list-item {
display: block;
margin-top: 50px;
margin-bottom: 45px;
}
.menu {
display: block;
position: absolute;
top: 35px;
right: 42px;
}
.active {
display: block;
}
}

Answer 1

试试这个我希望它会工作😊

.navbar {
font-size: 30px;
padding: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: auto;
background: rgb(255, 236, 65);
}
.list {
list-style-type: none;
}
.list-item {
display: inline-block;
margin-right: 40px;
}
.list-item:nth-child(4) {
margin-right: 0;
}
@media all and (max-width: 650px) {
.navbar {
flex-direction: column;
}
.list {
width: 100%;
text-align: center;
/* display: none; */
}
.list-item {
display: block;
margin-top: 50px;
margin-bottom: 45px;
}
.list-item:nth-child(4) {
margin-right: 40px;
}
.menu {
display: block;
position: absolute;
top: 35px;
right: 42px;
}
.active {
display: block;
}
}