ヘッダーの右寄せができない・隙間が空いてしまう

前提・実現したいこと

　　ATOMエディタでHTML CSS javascriptを使いHPを製作しています。
ヘッダー作成中に項目が右寄せできなくて詰まっていいるのでご教授いただきたいです。
また、スライダー写真と本文の間になぜか隙間が出てしまっているのでそこも見ていただけると嬉しいです。
よろしくお願いいたします。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <!-- swiperのCSSファイルの読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <title>株式会社A</title>
  </head>




<body>

  <header>
    <div class="headerBody">
        <div class="headerLeft-logo">
            <a href="index.html"><img src="./image/rogo.gif" alt="ロゴマーク"></a>
        </div>

  　　  <div class="headerRight">
  　　　   <nav class="global">
    　　      <ul class="globalList">
      　      　<li><a href="index.html"></a></li>
      　      　<li><a href="#Corporate Date"></a></li>
      　 　     <li><a href="#Access"></a></li>
　　　　　　  </ul>
  　　　   </nav>
  　  　</div>
   　 </div>
  　</header>

    <!-- 画像の読み込み -->
    <div class="mainVisual">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./image/buildings.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/1.jpg.webp"></div>
         </div>
            <!-- スライダー上の文字-->
        　  <div class="mainVisual_overRay">
        　  <p>A</p>
        　 </div>
      　 </div>
  　  　</div>

    <!-- swiperのJavaScriptファイルの読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> 
    </script>
    <!-- main.jsの読み込み -->
    <script src="main.js"></script>

<main>
     <p class="border"></p>

<div class="wrapper">
<h3>　
<span class="super"></span></h3>

 <div class="space">

　<p></p>
   
 </div>

<h3 id="Corporate Date">
  <span class="super"></span></h3>

<table>
  <tbody>
    <div class="space">

      <p class="hutoji">社名</p>
      <p>株式会社</p><br>

      <p class="hutoji">TEL</p>
      <p></p><br>

      <p class="hutoji">設立</p>
      <p></p><br>

      <p class="hutoji">本社</p>
      <p></p>
      <p></p><br>
      
     </div>
   </tbody>
 </table>

<h3>
<span class="super">Our Business</span></h3>
 <div class="space">
  <p></p>
 </div>


<h3 id="Access">
<span class="super">Access</span></h3>
 <div>
  <h4></h4>
   <div class="space">
    <p><br />
       <br /></div>
    <div class="p-map">
      <iframe src="https://www.google.com/maps/embed?
       frameborder="0" style="border:0" allowfullscreen></iframe></div>
    </div>

<p class="border"></p>
</main>
    <div class="footer">
      <div class="space">
        <div class="CopyRight" style="text-align: right">
           <p><a href="index.html"></p>
        </div>
      </div>
    </div>

  </div>
 </body>
</html>

CSS

@charset "UTF-8";



body {
   margin: 0;
   background-color: #e6e6e6;
}

header {
  width: 100%;
  height: 20px;/*ヘッダー背景高さ*/
  background-color: transparent;/*メニュー背景透明*/
  position: fixed;/*固定ヘッダー*/
  z-index: 3;     /*画像の上にロゴ・メニュー置く*/
}
.headerBody{
  display: flex;
  max-width: 1200px;
  margin: auto;
  height: 50px;/*ヘッダー高さ*/
  align-items: center;/*ヘッダー上下中央寄せ*/
　 position: relative;
}
.headerLeft-logo{
   width: 0px;     
   height: 0px;    
max-height: 100px;
  padding: 0 10px;  /*ロゴ右間隔*/
  margin-right: auto;
}
.headerLeft-logo img{
  width: 15vw;        
  height: 15vw;                              
}


.globalList{
  margin: 0;
  list-style: none;
  display: flex;
}
.globalList > li{
  position: relative;
  padding: 0 10px;     /*ヘッダー中 間隔*/
border-right: none;
.globalList > li > a:hover{
  opacity: 0.9;
}
a {
   text-decoration: none;  /*下線消去*/
   color: #ffffff;
   font-size: 15px;
}


/*　スライド　*/
.mainVisual{
  /* position:relativeで位置の基準にする */
  position: relative;
}
.swiper-wrapper{
  position: relative;
  background-color: #000000;
}
.swiper-slide img{
  width: 100%;
  height: 30%;

  z-index: 1;

  display: block;
  opacity: 0.5;/*スライダー曇りの色*/

  vertical-align: bottom; /* imgの下、隙間防止のため*/
}


.mainVisual_overRay p{
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 40%;
  color: #fff;
  font-size: 30px;
  font-family: 'IM Fell DW Pica SC', serif;
}




/*本文左の余白*/
.space{
  margin: 30px;　
 text-align: justify;
}

/*h3右の小文字*/
.super{
  font-size: 5px;
  color: #708090;
  vertical-align:baseline;
}


h3 {
  font: #000000;
  font-size: 30px;
  background-color: #dcdcdc;
  padding: 0.5em 0 0.5em 0;
  margin: 0 0 0 0;
}
.hutoji{
   font-weight: bold;
}
h4 {
   font-size: 20px;
   background-color: #f0f0f0;
}




/*　地図　*/
.p-map{
 height: 0;
 overflow: hidden;
 padding-bottom: 56.25%;/*マップ幅*/
 position: relative;
}
 .p-map iframe{
  position: absolute;
  left: 0;
  top: 0;
  height: 80%;/*マップ高さ*/
  width: 100%;
 }



/*　スマホ対応　*/
@media screen and (min-width:0px) and (max-width:480px){
  p{}
}
/*　タブレット対応　*/
@media screen and (min-wigth:481px) and (max-wight:1024px){
  p{}
}
/*　パソコン対応　*/
@media screen and (min-wight:1025) {
  p{}
}
/*　スマホ縦向き　*/
@media screen and (orientation:portrait){
  p {font-size:1em;}
}
/*　スマホ横向き　*/
@media screen and(orientation:landscape){
  p{font-size:1.2em;}
}





/*　CSSラインアニメーション　*/
.border{
	position: relative;
	font-size: 15px;
  color: #696969;
}
.border:before{
  color: #696969;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 2px #696969;
	animation: border_anim 8s linear forwards;/*アニメーションかかる時間*/
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}




.wrapper{
  height: 100%;
  min-height: 100vh; /*プラウザの高さ100vhを基準のヘッダー高さ*/
  position: relative;/*相対位置*/
  padding-bottom: 80px;/*フッター高さ*/
  box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
.footer{
  width: 100%;
  background-color: #dcdcdc;
  font: #000000;/**/
  padding: 10px 0;

}
.CopyRight{
  padding: 10px 0;
  background-color: #dcdcdc;
  font-family: 'IM Fell DW Pica SC', serif;
}

javascript

//Swiper設定
const mvSwiper = new Swiper ('.swiper-container',{

loop:true,
autoplay:{　　　　//自動再生
  delay:5000,　　//画僧表示時間
},
speed:500,      //スライダー切り替え速度 0.5s
});

試したこと

display: flex;やfloat:right;をやってみたのですが右寄せ適用されませんでした。

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

回答2件

ベストアンサー

HTMLに全角スペースが含まれているのが原因です。

フレックスレイアウトでは、文字列もフレックスアイテムとなるので、全角スペースがあるとその文字列がひとつの列を占めるようになります。

html
1  <header>
2    <div class="headerBody">
3      <div class="headerLeft-logo">
4        <a href="index.html"><img src="./image/rogo.gif" alt="ロゴマーク"></a>
5      </div>
6
7      ␣␣ <div class="headerRight">
8        ␣␣␣ <nav class="global">
9          ␣␣ <ul class="globalList">
10            ␣ ␣<li><a href="index.html">HOME</a></li>
11            ␣ ␣<li><a href="#Corporate Date">会社概要</a></li>
12            ␣ ␣ <li><a href="#Access">アクセス</a></li>
13            ␣␣␣␣␣␣ </ul>
14          ␣␣␣ </nav>
15        ␣ ␣</div>
16      ␣
17    </div>
18    ␣
19  </header>

その他、HTMLの中に全角スペースがあると思わぬ表示になることは多いので、使用を避けた方が無難です。

投稿2021/09/21 07:11

Lhankor_Mhy

総合スコア37483

iiinnn

2021/09/22 08:55

全角スペースを消してみたらうまく動くようになりました。ありがとうございます。今後気を付けていく様にします。

Lhankor_Mhy

2021/09/22 09:11

お役に立てたようで何よりです。他にご不明なことがなければ、BAを選んで質問のクローズをお願いします。

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

こんにちは
display:flex;をかけている部分にjustify-content:flex-end;を入れてみてはいかがですか？

css
1.globalList{
2  margin: 0;
3  list-style: none;
4  display: flex;
5  justify-content:flex-end;/*←これです。*/
6}

ちなみにflexboxには様々な機能があるのでよくweb上にチートシートがあったりします。
よく活用しているのでぜひ検索をかけてみてください。

また、

スライダー写真と本文の間になぜか隙間が出てしまっている
の方は検証ができていないので、取り急ぎ分かる部分のみお伝えします。
わかりそうだったら編集します。
中途半端ですみません。
ご活用ください。

追記：現在justify-content自体が効かないので原因を調査中です。

投稿2021/09/15 08:38

編集2021/09/16 03:39

morimorinoki

総合スコア84

iiinnn

2021/09/15 08:58

早くにコメントありがとうございます。 ustify-content:flex-end; をかけてみたのですが変化はなかったです。。

morimorinoki

2021/09/16 03:37

あ、すみませんほんとですね・・・そもそもjustify-content自体が効いてないようです。他のflexの値は効いていますがこれだけが効かないようです。わたしの方でも原因調査しますので少々お時間いただけますか？

iiinnn

2021/09/16 04:01

ご親切にありがとうございます。調査のほど、よろしくお願いいたします。私も引き続き調べてみます！

iiinnn

2021/09/22 23:01

全角スペースがあったことで隙間が出てしまっていました。今後気を付けていきたいです。調べていただきありがとうございました。

morimorinoki

2021/09/24 00:50

すみません、私もLhankor_Mhyさんの回答を見て、あってなりました・・・大変お恥ずかしい・・・

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

前提・実現したいこと

HTML

CSS

javascript

試したこと

関連した質問