文字を真ん中に寄せる

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>lebel</title>
6    <link rel="stylesheet" href="模写２.css">
7  </head>
8  <body>
9  <div class="Container">
10   <header id="Header" class="header">
11    <div class="header-logo">
12     <a href="#">
13      <img src="logo.svg">
14     </a>
15    </div>
16    <nav id="globalnavi" class="globalnavi">
17     <ul class="globalnavi-level1">
18      <li class="globalnav-lebel1-hover">
19       <p class="globalnavi-level1-navi">
20        <span>ABOUT</span>
21       </p>
22      </li>
23      <li class="globalnav-lebel1-hover">
24       <p class="globalnavi-level1-navi">
25        <span>PRODUCTS</span>
26       </p>
27      </li>
28      <li class="globalnav-lebel1-hover">
29       <p class="globalnavi-level1-navi">
30        <span>NEWS</span>
31       </p>
32      </li>
33      <li class="globalnav-lebel1-hover">
34       <p class="globalnavi-level1-navi">
35        <span>JOURNAL</span>
36       </p>
37      </li>
38      <li class="globalnav-lebel1-hover">
39       <p class="globalnavi-level1-navi">
40        <span>LABORATORY</span>
41       </p>
42      </li>
43     </ul>
44     <p class="globalnavi-for_salon">
45      <a href="#">for SALON</a>
46     </p>
47    </nav>
48   </header>

CSS
1img {
2  width: 100%;
3  height: auto;
4  max-width: none;
5}
6
7li {
8  list-style: none;
9}
10
11
12body {
13    font-family: StoneSansITCPro-Medium,FP-こぶりなゴシック StdN W3,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,Yu Gothic,YuGothic,メイリオ,Meiryo,sans-serif;
14    line-height: 2;
15    color: #000;
16    letter-spacing: .08em;
17    background-color: #fff;
18    font-feature-settings: "palt";
19    -webkit-text-size-adjust: 100%;
20    -ms-text-size-adjust: 100%;
21    text-size-adjust: 100%;
22    overscroll-behavior-y: none;
23    -webkit-font-smoothing: subpixel-antialiased;
24    -moz-osx-font-smoothing: unset
25}
26
27body {
28  font-size: 1.4rem;
29}
30
31.header img {
32  width: 110px;
33}
34
35 .header-logo {
36   text-align: center;
37   background-color: pink;
38 }
39
40
41 a {
42    color: #000;
43    text-decoration: none
44}
45
46.header {
47  top: 0;
48  left: 0;
49  z-index: 100%;
50  width: 100%;
51}
52
53.globalnavi {
54  width: 100%;
55  position: relative;
56}
57
58.globalnavi-level1 {
59  position: relative;
60  display: flex;
61  align-items: center;
62  cursor: pointer;
63  font-size: 10px;
64  text-align: center;
65}
66
67.globalnav-lebel1-hover {
68  padding: 0 15px;
69
70}
71
72.globalnavi-level1-navi {
73    position: relative;
74    display: flex;
75    align-items: center;
76    font-family: StoneSansITCPro-Medium,Avenir,sans-serif;
77    line-height: 1;
78    letter-spacing: .18em;
79    cursor: pointer;
80
81}
82
83
84.globalnavi-for_salon a {
85  position: fixed;
86  top: 14px;
87  right: 2px;
88  font-size: 10px;
89  font-family: StoneSansITCPro-Medium,Avenir,sans-serif;
90
91}
92
93.visual-img  {
94  width: 100%;
95}
96
97.visual-img img {
98  width: 100%
99  height: auto;
100}