モーダルウィンドウを表示した時に背景のコンテンツがずれるのを直したい

いつもお世話になっております。

jQueryでモーダルウィンドウを実装しているのですが、モーダルウィンドウを表示した際に背景のコンテンツが左にずれるという現象が発生しております。

なぜずれてしまうのか原因が分からないため、どこが原因になっているかを知りたいです。
対策については指摘いただいた原因を基にして考えられたらなと思っています。

PHP
1<div class="tabs_wrap">
2  <ul class="tabs">
3    <li><a href="#">1</a></li>
4    <li><a href="#">2</a></li>
5    <li><a href="#">3</a></li>
6  </ul>
7  <div class="tabs_content">
8    <div>
9      <p>
10        <!-- ここからモーダルウィンドウ実装 -->
11        <div id="modal-content">
12          <!-- モーダルウィンドウのコンテンツ開始 -->
13          <button type="button" name="select_delete" value="select_delete" class="select_delete" onclick="javaScript:DisChecked()">チェックを全て外す</button>
14          <br>
15          <input type="text" id="keyword" name="keyword" size="30" disabled="disabled"/>
16          <div id="material_select">
17            <div id="meet_select">
18              <p><a href="javaScript:pullDown('id1')">テスト</a></p>
19            </div>
20            <div id="id1" style="display:none;">
21              <div class="all-container">
22                <div id="check-label-container">
23                  <label class="check-label">
24                    <span>テスト1</span>
25                    <input type="checkbox" name="check" value="テスト1">
26                    <span class="checkmark"></span>
27                  </label>
28                  <label class="check-label">
29                    <span>テスト2</span>
30                    <input type="checkbox" name="check" value="テスト2">
31                    <span class="checkmark"></span>
32                  </label>
33                </div>
34              </div>
35            </div>
36          </div>
37            <div id="select_ok">
38              <button type="button" name="select_ok" value="select_ok" class="select_ok" onclick="javaScript:OK()">OK</button>
39            </div>
40        </div>
41        <input id="modal-open" value="モーダル表示" class="button-link">
42        <!-- ここまでモーダルウィンドウ -->
43        <form action="search-result" method="get">
44          <input type="hidden" name="page_no" value="1">
45          <span style="border: 1px solid #cccccc; padding: 10px; background: #f2f2f2;">
46            <input id="selected_only" type="checkbox" name="selected_only" value="true">
47            <label for="selected_only">チェックボックス</label>
48          </span>
49          <br>
50          <div class="front_recipe_search">
51            <input id="front_searchfield" type="text" maxlength="30" placeholder="例) テスト" name="materials" class="front_searchfield" value=""/>
52            <button type="submit" value="materials" name="type" class="search">検索</button>
53            <button type="reset" value="クリアする" name="form_clear" class="form_clear">クリアする</button>
54          </div>
55        </form>
56      </p>
57    </div>
58
59    <div>
60      <p>
61        <form action="search-result" method="get">
62          <input type="hidden" name="page_no" value="1">
63          <input type="text" placeholder="例) テスト" name="recipe_name" class="front_recipename_searchfield">
64          <br>
65          <button type="submit" value="name" name="type" class="recipename_search">検索</button>
66        <br>
67        <br>
68        <button type="reset" class="form_clear_name">クリアする</button>
69      </form>
70      </p>
71    </div>
72
73    <div>
74    <p>
75        <form action="search-result" method="get">
76				<input type="hidden" name="type" value="genre">
77				<input type="hidden" name="page_no" value="1">
78				<button type="submit" value="VEGETABLE" name="genre" class="genre">テスト</button>
79				<button type="submit" value="RICE" name="genre" class="genre">テスト</button>
80				<br>
81				<br>
82				<button type="submit" value="MEAT_DISH" name="genre" class="genre">テスト</button>
83				<button type="submit" value="FISH_DISH" name="genre" class="genre">テスト</button>
84				<br>
85				<br>
86				<button type="submit" value="NOODLES" name="genre" class="genre">テスト</button>
87				<button type="submit" value="SOUP_STOCK" name="genre" class="genre">テスト</button>
88				<br>
89				<br>
90				<button type="submit" value="CASSEROLE" name="genre" class="genre">テスト</button>
91				<button type="submit" value="OTHERS" name="genre" class="genre">テスト</button>
92				<br>
93				</form>
94      </p>
95    </div>
96
97  </div>
98</div>

※jQueryで書いています。

JavaScript
1<script>
2jQuery(function($){
3
4//モーダルウィンドウを出現させるクリックイベント
5$("#modal-open").click( function(){
6
7	//キーボード操作などにより、オーバーレイが多重起動するのを防止する
8	$( this ).blur() ;	//ボタンからフォーカスを外す
9	if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない (防止策1)
10	//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する (防止策2)
11
12	//オーバーレイを出現させる
13	$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
14	$( "#modal-overlay" ).fadeIn( "slow" ) ;
15
16	//コンテンツをセンタリングする
17	centeringModalSyncer() ;
18
19	//コンテンツをフェードインする
20	$( "#modal-content" ).fadeIn( "slow" ) ;
21	$("body").css("position","fixed");
22
23	//[#modal-overlay]、または[#modal-close]をクリックしたら…
24	$( "#modal-overlay,#modal-close" ).unbind().click( function(){
25
26		//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
27		$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
28
29			//[#modal-overlay]を削除する
30			 $("body").css("position","static");
31			$('#modal-overlay').remove() ;
32
33		} ) ;
34
35	} ) ;
36
37} ) ;
38
39//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
40$( window ).resize( centeringModalSyncer ) ;
41
42	//センタリングを実行する関数
43	function centeringModalSyncer() {
44
45		//画面(ウィンドウ)の幅、高さを取得
46		var w = $( window ).width() ;
47		var h = $( window ).height() ;
48
49		// コンテンツ(#modal-content)の幅、高さを取得
50		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
51//		var cw = $( "#modal-content" ).outerWidth( {margin:true} );
52//		var ch = $( "#modal-content" ).outerHeight( {margin:true} );
53		var cw = $( "#modal-content" ).outerWidth();
54		var ch = $( "#modal-content" ).outerHeight();
55
56		//センタリングを実行する
57		$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
58
59	}
60
61} ) ;
62
63</script>

CSS
1body {
2	background-color: #ffffe1;
3}
4
5/* メニュータブ */
6ul.tabs {
7	width: 880px;
8	margin-top: 200px;
9	margin-left: auto;
10	margin-right : auto;
11	list-style: none;
12}
13ul.tabs li {
14	background: #e2f0d9;
15	border-right: 1px solid #ff3c14;
16	border-top: 1px solid #ff3c14;
17	border-bottom: none;
18	margin-bottom: 0;
19	float: left;
20}
21
22ul.tabs li:first-child {
23	border-left: 1px solid #ff3c14;
24}
25
26ul.tabs li.active {
27	border-bottom: 1px solid #FFF;
28	background-color: white;
29	margin-bottom: -1px;
30}
31ul.tabs li a {
32	display: block;
33	padding: 5px 10px;
34	color: #777;
35	text-decoration: none;
36}
37ul.tabs li.active a {
38	font-weight: bold;
39	color: #000;
40}
41div.tabs_content {
42	width: 800px;
43	margin-left: auto;
44	margin-right : auto;
45	border: 1px solid #ff3c14;
46	clear: both;
47}
48div.tabs_content > div {
49	background: white;
50	padding: 20px;
51	text-align: center;
52}
53
54div.front_recipe_search {
55	margin: 0;
56	padding: 20px 70px;
57}
58
59input.front_searchfield {
60	width : 300px;
61	margin: 0 auto;
62	color: black;
63	border-color:#009245;
64	float:left;
65}
66
67input.front_recipename_searchfield {
68	width : 500px;
69	margin: 0 auto;
70	color: black;
71	border-color:#009245;
72}
73
74button.search {
75	/* 文字サイズの指定 */
76	font-size: 0.9em;
77	/* 角丸の指定 */
78	-moz-border-radius: 5px;
79	-webkit-border-radius: 5px;
80	border-radius: 5px;
81	width: 150px;
82	height: 35px;
83	color:white;
84	background-color:#ff5f41;
85	border-color:#ff5f41;
86	float:left;
87	margin-left: 5px;
88	margin-right: 5px;
89}
90
91button.recipename_search {
92	/* 文字サイズの指定 */
93	font-size: 0.9em;
94	/* 角丸の指定 */
95	-moz-border-radius: 5px;
96	-webkit-border-radius: 5px;
97	border-radius: 5px;
98	width: 200px;
99	height: 38px;
100	color:white;
101	background-color:#ff5f41;
102	border-color:#ff5f41;
103}
104
105button.form_clear {
106	/* 文字サイズの指定 */
107	font-size: 0.9em;
108	/* 角丸の指定 */
109	-moz-border-radius: 5px;
110	-webkit-border-radius: 5px;
111	border-radius: 5px;
112	width: 150px;
113	height: 35px;
114	color: white;
115	background-color:#a5a5a5;
116	border-color:#a5a5a5;
117	float:left;
118}
119
120button.form_clear_name {
121	/* 文字サイズの指定 */
122	font-size: 0.9em;
123	/* 角丸の指定 */
124	-moz-border-radius: 5px;
125	-webkit-border-radius: 5px;
126	border-radius: 5px;
127	width: 160px;
128	height: 38px;
129	color: white;
130	background-color:#a5a5a5;
131	border-color:#a5a5a5;
132}
133
134#modal-content{
135	width:50%;
136	height:550px;
137	margin:1.5em auto 0;
138	padding:10px 20px;
139	border:2px solid #aaa;
140	background:#fff;
141	z-index:2;
142	position:fixed;
143	display:none;
144	overflow-y: scroll;
145	text-align:center;
146}
147
148#modal-overlay{
149	z-index:1;
150	display:none;
151	position:fixed;
152	top:0;
153	left:0;
154	width:100%;
155	height:120%;
156	background-color:rgba(0,0,0,0.75);
157}
158
159.button-link{
160	margin-bottom : 20px;
161	text-align:center;
162	-moz-border-radius: 5px;
163	-webkit-border-radius: 5px;
164	border-radius: 5px;
165	WIDTH: 200px;
166	HEIGHT: 38px;
167	font-size:15px;
168	color: white;
169	background-color:#008000;
170	border-color:#92d050;
171}
172
173.button-link:hover{
174	cursor:pointer;
175}
176