ページをスクロールしていき、途中でナビが固定された後に、div mainがナビの高さ分ずれてしまいます。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>山岳環境研究室</title>
6		<link rel="stylesheet" href="common.css">
7		<link rel="stylesheet" href="index.css">
8		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300" rel="stylesheet">
9	</head>
10	<body>
11		<header>
12			<div class="header-left">
13				<h1 class="header-logo">NME</h1> 
14				<h1 class="header-title">山岳環境研究室</h1>
15			</div>                                                                   
16		</header><!-- /header -->
17		<div class="top"></div>		
18		<div class="navi" id="global-nav">
19			<div class="menu home">
20				<a href="index.html">ホーム</a>
21			</div>
22			<div class="menu research">
23				<a href="research.html">研究</a>		
24			</div>
25			<div class="menu achievement">
26				<a href="achievement.html">実績</a>
27			</div>
28			<div class="menu access">
29				<a href="access.html">アクセス</a>
30			</div>
31			<div class="menu gallery">
32				<a href="gallery.html">ギャラリー</a>
33			</div>
34		</div>
35		<div class="main">
36			<div class="container">
37				<div class="description">
38					<p>当研究室では、</p>
39					<p>天山山脈,ヒマラヤ,日本アルプスなどのアジア山岳地域を対象に、フィールドワーク（現地調査・観測），GIS（地理情報システム），リモートセンシング（衛星画像解析）の手法を用いて，山岳氷河の変動，山岳永久凍土の空間分布と存在環境，氷河湖決壊洪水や地形災害のプロセスとその被害に関する山岳環境変動の実態解明をめざして活動しています。</p>			
40				</div>
41				<div class="pic">
42					<div class="home-card">
43						<div class="menu-card-inner">
44							<a href="research.html"><img src="image/laboratory-2815641_1920.jpg" alt="研究"></a>
45							<a href="research.html" class="home-menu-title">研究</a>
46						</div>
47					</div>
48					<div class="home-card">
49						<div class="menu-card-inner">
50							<a href="achievement.html"><img src="image/books-1245690_1920.jpg" alt="実績"></a>
51							<a href="achievement.html" class="home-menu-title">実績</a>	
52						</div>
53					</div>
54					<div class="home-card">
55						<div class="menu-card-inner">	
56							<a href="access.html"><img src="image/wind-rose-1209398_1920.jpg" alt="アクセス"></a>
57							<a href="access.html" class="home-menu-title">アクセス</a>
58						</div>
59					</div>
60					<div class="home-card">
61						<div class="menu-card-inner">
62							<a href="gallery.html"><img src="image/研究内容写真-2.jpg" alt="ギャラリー"></a>
63							<a href="gallery.html" class="home-menu-title">ギャラリー</a>
64						</div>
65					</div>
66				</div>
67			</div>
68		</div>
69		<footer>
70			<p>&copy;　山岳環境研究室　All Rights Reserved.</p>
71		</footer>
72		<script src="js/jQuery-3.4.1.min.js" type="text/javascript"></script>
73	</body>
74</html>
75

css
1@charset "utf-8";
2*{
3    margin:0;
4    padding:0;
5}
6body{
7    width:960px;
8    margin:0 auto;
9    }
10header{
11    height:90px;
12    background-color:rgba(34, 49, 52, 0.9);
13    border-bottom:1px solid #CCCCCC;
14}
15.header-left{ 
16    display:flex;
17}
18.header-logo{
19    color:white;
20    font-size:50px;
21    font-family:'Alegreya Sans SC', sans-serif;
22    margin:18px 10px 0 10px;
23
24}
25.header-title{
26    color:white;
27    margin-top:35px;
28    margin-left:4px;
29    font-family:'Alegreya Sans SC', sans-serif;
30    font-size:25px;
31}
32.top{
33    height:400px;
34    background-image:url("image/キービジュアル圧縮70.jpg");
35    background-size:cover;
36}
37.navi{
38    height:55px;
39    background-color:#62d2a2;
40    display:inline-block;
41    width:100%;
42    display:flex;
43    border-top:1px solid #CCCCCC;
44    border-bottom:1px solid #CCCCCC;
45}
46.fixed {
47  position: fixed;
48  width: 960px;
49  top: 0;
50  z-index: 1000;
51}
52.menu{
53    border-left:1px dashed white;
54    height:55px;
55    line-height:55px;
56    width:20%;
57}
58.menu:hover{
59        background-color:#239b76;
60        transition:background-color 0.5s;
61    }
62.menu a{
63    color:white;
64    display:inline-block;
65    width:100%;
66    text-align:center;
67    text-decoration:none;
68}
69.home{
70    border-left:none;
71}
72footer{
73    background-color:#d7fbe8;
74    height:90px;
75}
76footer p{
77    width:100%;
78    height:90px;
79    line-height:90px;
80    text-align:center;
81}

jQuery
1$(function() {
2  var menu = $('#global-nav'),
3  offset = menu.offset();
4  $(window).scroll(function () {
5    if($(window).scrollTop() > offset.top) {
6      menu.addClass('fixed');
7    } else {
8      menu.removeClass('fixed');
9    }
10  });
11});