headerの中のnavタグの配置について

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
目標
![![イメ5192f019fa7c2cdc574770c43210f4.jpeg)
こういう形のレイアウトを目標にコーディングしているのですが、cssの配置がうまくいっていません。
ロゴとナビのおいてある部分を透過させてトップ画像を薄く写したいのですができてません。!
wrapperの幅は1280pxを想定しています。

現在

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<body class="index">
2  <div class="wrapper">
3    <header>
4      <div class="containerA">
5        <div class="row">
6          <h1 class="title">
7            <a href=”index.html”>
8              <img src="images/logo01.png" alt="サイトロゴ">
9            </a>
10          </h1>
11          <div class="hd_info">
12            <figure><img src="images/header_img001.png" alt="03-3805-XXXX"></figure>
13          </div>
14          <nav class="global">
15            <ul>
16              <li><a href="index.html"><span>ホーム</span></a></li>
17              <li><a href="menu.html"><span>メニュー</span></a></li>
18              <li><a href="deliciousness.html"><span>おいしさのこだわり</span></a></li>
19              <li><a href="#"><span>オンライン</span></a></li>
20              <li><a href="#"><span>店舗情報</span></a></li>
21              <li><a href="form.html"><span>お問い合わせ</span></a></li>
22            </ul>
23          </nav>
24          <div class="main_visual">
25            <img src="images/main_copy1.png" alt="#">
26            </div>
27        </div>
28      </div>
29    </header>
30
31</body></html>
32
33

css
1/* div.wrapper
2---------------------------------------*/
3.wrapper {
4  width: 1280px;
5  background-color: #F6F6F6;
6  margin: 0 auto;
7}
8
9/* header
10---------------------------------------*/
11header {
12  width: 100%;
13  height: 537px;
14  position: relative;
15  background-image: url(../images/topgazo.png);
16}
17
18header h1 {
19  padding: 19px 0 34px 0;
20  margin-bottom: 10px;
21}
22
23header p {
24  font-weight: 400;
25  line-height: 1.5em;
26  text-shadow: 2px 2px 2px #000;
27}
28
29header p img {
30  width: 1280PX;
31}
32
33header .title {
34  vertical-align: middle;
35  height: 175px;
36  margin: 0;
37  float: left;
38}
39
40figure {
41  padding: 19px 94px 0 0;
42  text-align: right;
43}
44
45header .row {
46  background-color: rgba(246, 246, 246, 0.87);
47}
48
49
50
51/* nav.global
52---------------------------------------*/
53nav.global {
54  float: right;
55  text-align: right;
56  width: 886px;
57  padding: 28px 43px 43px 0;
58  vertical-align: bottom;
59  background-color: rgba(246, 246, 246, 0.87);
60}
61
62nav.global ul li {
63  width: 15%;
64  float: left;
65}
66
67nav.global ul li a {
68  display: block;
69  color: #6A5C56;
70  font-weight: 300;
71  font-size: 1em;
72  text-align: center;
73  text-decoration: none;
74  line-height: 30px;
75}
76
77nav.global ul li a:hover span {
78  border-bottom: 3px solid #AA5065;
79  padding: 0 1em;
80}
81

resetcss
1@charset "utf-8";
2
3body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,figure,input,textarea,p,blockquote,th,td {
4	margin:0;
5	padding:0;
6}
7table {
8	border-collapse:collapse;
9	border-spacing:0;
10}
11fieldset,img {
12	border:0;
13}
14address,caption,cite,code,dfn,em,strong,th,var {
15	font-style:normal;
16	font-weight:normal;
17}
18ol,ul {
19	list-style:none;
20}
21caption,th {
22	text-align:left;
23}
24
25
26/*clearfix-------------------------------*/
27.clearfix {
28	zoom:1;
29}
30.clearfix:after {
31	content:"";
32	display:block;
33	clear:both;
34}
35