mobile header margin changes desktop header margin

I am using the logo option under Site Identity to display my logo. I've edited the top & bottom margins to 40px on the nav element in css in order to have a nice amount of space above and below the logo on mobile view - however when I do that, then too much space is reflected on the desktop view.

.inside-header > :not(:last-child):not(.main-navigation) {
margin-top:40px;
margin-bottom:40px;
}

How do I keep the mobile view just like it is but decreased the space above and below the logo on desktop view at the same time? I've emailed a screenshot PDF