【flexbox】何故効かないのか

皆様の御知恵をお借りしたく質問いたします。

現在組んでいるページで、どうしてもflexboxが効かない箇所がありまして、ネットサーフィンをして解決を試みたのですがどうしても効きません。
該当箇所で、どこかおかしい箇所がありましたら是非ご指摘いただきたいです。
（現在作業中のページなので、該当箇所意外にもエラーはありますが、そこは気になさらずお願いいたします。また字数制限のため、該当箇所と関係のないコードは省いております。）
《該当箇所》
●メディアクエリー min-width1280pxの、<div id="access&contact">のflexboxにて、<div id="access">と<div class="contact">を横に並列させたいが、どうしても縦に並んでしまいます。

稚拙な質問で恐れ入ります。どうぞ宜しくお願い致します。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/style.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
9<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
10</head>
11
12<body onLoad="initialize();">
13    <div id="nav-toggle">
14	</div>
15    <div id="global-nav2">
16	</div>
17    <main>
18
19            <div id="access&contact">
20            	<div id="access">
21                	<div id="map_custmomize" style="width:100%;height:720px;">
22                    </div>
23                    <h1>Accesso</h1>
24                    <h2>アクセス</h2>
25                    <table>
26						<tbody>
27                    	<tr>
28                        	<td><img src="img/add.svg"></td>
29                            <td>東京都港区麻布十番1-5-12 麻布永谷ビル1F</td>
30                            </tr>
31                            <tr>
32                    		<td><img src="img/tel.svg"></td>
33                            <td>03-6614-9041</td>
34                            </tr>
35                            <tr>
36                            <td><img src="img/email.svg"></td>
37                            <td>info@gola.com</td>
38                            </tr>
39                            <tr>
40                           <td><img src="img/website.svg"></td>
41                           <td>http://www.gola.com</td>
42                         </tr>
43                         </tbody>
44                      </table>
45                </div>
46                <div class="contact">
47                    	<div class="contacttittle">
48		                    <h1>Contattaci</h1>
49		                    <h2>お問合わせ</h2>
50                        </div>
51                    <P>ご予約・ご相談は下記フォームからお問い合わせください。<br>
52							お電話・E-MAILでも承っております。
53					</P>
54			<div class="contact_detail">
55        <form action="confirm.php" method="post" id="contact">
56        <table>
57  <tbody>
58    <tr><td>お名前　<span class="hissu"><img src="img/hissu.svg"></span></td></tr>
59    <tr><td style="height:6px;"></td></tr>
60    <tr><td><input name="name" value="" placeholder="　お名前を入力下さい。" type="text" size="35%" class="required"></td></tr>
61    <tr><td style="height:20px;"></td></tr><br>
62    <tr><td>フリガナ</td></tr>
63    <tr><td style="height:6px;"></td></tr>
64    <tr><td><input name="furi" value="" placeholder="　フリガナを入力下さい。" type="text" size="35%"></td></tr>
65    <tr><td style="height:20px;"></td></tr><br>
66        <tr><td>電話番号　<span class="hissu"><img src="img/hissu.svg"></span></td></tr>
67    <tr><td style="height:6px;"></td></tr>
68    <tr><td><input name="tel" value="" placeholder="　電話番号を入力下さい。" type="text" id="tel" size="35%" class="required"></td></tr>
69    <tr></tr><br>
70    <tr><td style="height:20px;"></td></tr><br>
71        <tr><td>E-Mail　<span class="hissu"><img src="img/hissu.svg"></span></td></tr>
72    <tr><td style="height:6px;"></td></tr>
73    <tr><td><input name="email" value="" placeholder="　E-Mailアドレスを入力下さい。" type="text" id="email" size="35%" class="required"></td></tr>
74    <tr></tr><br>
75    <tr><td style="height:20px;"></td></tr><br>
76    <tr><td>お問い合わせ内容　<span class="hissu"><img src="img/hissu.svg"></span></td></tr>
77        <tr><td style="height:6px;"></td></tr>
78        <tr><td><textarea name="content" placeholder="　お問い合わせ内容を入力下さい。" cols="35%" rows="10" id="content"></textarea></td></tr>
79    <tr><td style="height:20px;"></td></tr><br>
80    <tr><td colspan="3"><div class="submit"><input type="submit" name="submit" id="submit" value="送信"></div></td></tr>
81  </tbody>
82</table>
83				</form>
84                </div>
85            </div>
86            </div>
87            <footer>
88            </footer>    
89    </main>
90    	<div id="overlay"></div>  
91
92
93<script type="text/javascript">
94		$(document).ready(function() {
95    	$("#contact").validate();
96		});
97</script>
98
99
100<!--地図情報-->
101<script>function initialize() {
102  var latlng = new google.maps.LatLng(35.6567777,139.7338803);/*表示したい場所の経度、緯度*/
103  var myOptions = {
104    zoom: 17, /*拡大比率*/
105    center: latlng, /*表示枠内の中心点*/
106    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
107  };
108  var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*マップのID取得*/
109 
110  /*スタイルのカスタマイズ*/
111  var styleOptions =
112[
113  {
114    "featureType": "landscape.natural",
115    "stylers": [
116      { "color": "#fff2c2" }
117    ]
118  },{
119    "featureType": "road",
120    "stylers": [
121      { "gamma": 2.61 },
122      { "color": "#ffffff" }
123    ]
124  },{
125    "featureType": "transit.line",
126    "stylers": [
127      { "invert_lightness": true },
128      { "visibility": "simplified" },
129      { "color": "#ffbe00" }
130    ]
131  },{
132    "elementType": "labels.icon",
133    "stylers": [
134      { "visibility": "off" }
135    ]
136  },{
137    "featureType": "landscape.man_made",
138    "elementType": "geometry",
139    "stylers": [
140      { "visibility": "simplified" },
141      { "color": "#ffde5" }
142    ]
143  },{
144    "featureType": "poi",
145    "elementType": "geometry",
146    "stylers": [
147      { "color": "#ffde5b" }
148    ]
149  },{
150    "featureType": "water",
151    "stylers": [
152      { "color": "#dfe8ff" }
153    ]
154  },{
155    "featureType": "transit.station",
156    "elementType": "geometry",
157    "stylers": [
158      { "color": "#fab022" }
159    ]
160  }
161];
162 
163 var styledMapOptions = { name: 'Trarrtoria Gola' }
164  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
165  map.mapTypes.set('sample', sampleType);
166  map.setMapTypeId('sample');
167 
168/*Trarrtoria Golaの取得*/
169var icon = new google.maps.MarkerImage('img/gola_maplogo.png',/*アイコンの場所*/
170  new google.maps.Size(135,65.668),/*アイコンのサイズ*/
171  new google.maps.Point(0,0)/*アイコンの位置*/
172);
173 
174/*マーカーの設置*/
175var markerOptions = {
176  position: latlng,/*表示場所と同じ位置に設置*/
177  map: map,
178  icon: icon,
179  title: 'Trarrtoria Gola'/*マーカーのtitle*/
180};
181var marker = new google.maps.Marker(markerOptions);
182 
183}
184</script>	
185
186
187        
188</div></body>
189</html>

css
1@charset "UTF-8";
2/* CSS Document */
3body{
4	width:100%;
5	height:auto;
6	font-family:"こぶりなゴシック StdN W3L";
7	font-size:18px;
8	line-height:2;
9	color:rgba(255,255,255,1);
10    -webkit-animation: fadeIn 5s ease 0s 1 normal;
11    animation: fadeIn 5s ease 0s 1 normal;
12	background-color:#1a1a1a;
13}
14
15main{
16	width:100%;
17}
18
19#access&contact{
20	display:flex;
21	width:100%;
22	height:auto;
23	margin-top:120px;
24}
25/*accessここから*/
26#access{
27	width:100%;
28	height:auto;
29	background-color:rgba(204,204,204,1);
30	color:rgba(51,51,51,1);
31	padding-bottom:30px;
32	margin-bottom:60px;
33}
34#map_custmomize{
35	width:100%;
36	height:720px;
37	margin-bottom:20px;
38}
39#access table{
40	display:flex;
41	align-aitems:center;
42	width:81.25%;
43	height:auto;
44	padding:0 9.375%;
45	margin:0 auto;
46	font-size:14px;
47	line-height:2.25;
48}
49#access table tbody{
50	margin:0 auto;
51}
52#access table tr td:first-child{
53	text-align:right;
54}
55#access table tr td img{
56	display:inline-block;
57	vertical-align:middle;
58	margin-top:-5px;
59}
60#access table tr td:last-child{
61	padding-left:10px;
62	font-feature-settings: "palt";
63}
64/*accessここまで*/
65/*contactここから*/
66.contact{
67	margin-bottom:60px;
68}
69.contact p, .contact_detail{
70	display:inline-block;
71	width:81.25%;
72	height:auto;
73	padding:0 9.375%;
74	margin:10px auto 0;
75	font-size:12px;
76	line-height:2;
77	text-align:center;
78}
79.contact_detail{
80	height:auto;
81	text-align:inherit;
82	margin-top:-150px;
83}
84.contact_detail table{
85	margin:0 auto;
86	height:auto;
87}
88.contact_detail img{
89	display:inline-block;
90	vertical-align:text-top;
91}
92.submit{
93	text-align:center;
94}
95/*contactここまで*/
96/*footerここから*/
97footer{
98	width:100%;
99	height:80px;
100	background-color:rgba(191,191,191,1);
101	color:rgba(51,51,51,1);
102	font-family:Baskerville;
103	font-size:14px;
104	text-align:center;
105	line-height:80px;
106	position:relative;	
107	bottom:0;
108	right:0;
109}
110/*footerここまで*/
111
112/*-----------------------------------------------------------------------*/
113@media only screen and (min-width : 1280px) {
114		#global-nav{
115		display:none;
116		}
117		#global-nav2{
118		width:8.889%;
119		height:974px;
120		position:fixed;
121		left:0;
122		top:0;
123		display:inline-flex;
124		justify-content:center;
125		align-aitems:center;
126		background-color:rgba(255,255,255,1);
127	}
128#global-nav2 ul{
129		display:inline-flex;
130		justify-content:space-around;
131		flex-direction:column;
132		margin:auto 0;
133		width:80px;
134	}
135	#global-nav2 ul li{
136		width:80px;
137		border:none;
138		line-height:80px;
139		padding-bottom:30px;
140}
141	#global-nav2 ul li:first-child{
142		border:none;
143	}
144	#global-nav2 ul li a{
145		width:100%;
146		height:auto;
147		display:inline-flex;
148		justify-content:center;
149		align-aitems:center;
150		margin:0 auto;
151		color:rgba(51,51,51,1);
152		background-color:none;
153		transform:rotate(90deg);
154}
155	#global-nav2 ul li:nth-child(5), #global-nav2 ul li:nth-child(6){
156		transform:rotate(-90deg);
157		padding:0 0 0 12.5px;
158	}
159	#global-nav2 ul li:nth-child(5){
160		margin:20px auto -20px;
161	}
162		#access&contact{
163			width:100%;
164			display:flex;
165			flex-direction:row;
166			align-items:center;
167		}
168		#access{
169			width:50%;
170			height:auto;
171			margin:0 -50% 0 0;
172			position:relative;
173			left:0;
174			top:0;
175			clear:none;
176		}
177		.contact{
178			width:50%;
179			height:auto;
180			margin:0;
181			position:relative;
182			right:0;
183			top:0;
184			clear:none;
185		}
186}
187

行動規範の内容に同意します

回答2件

HTML
1<div id="access&amp;contact">access&amp;contact</div>

CSS
1#access\&contact { /* エスケープすれば適用できる */
2  background-color: red;
3}
4```**動くサンプル：**[https://jsfiddle.net/yuxbwzg9/1/](https://jsfiddle.net/yuxbwzg9/1/)
5
6---
7
8【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 · GitHub】
9[https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad](https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad)