ナビゲーションメニューの配置を右上にしたい。

前提・実現したいこと

HTMLとCSSで簡単なフルスクリーンページの制作中ですが、ナビゲーションメニューの「News,Menu,Contact」の配置を画面の右上に持っていきたいです。

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

display: flex;
justify-content: space-between;
で右上に持ってきたいのですが、どうしても上手く実装されません。



### 該当のソースコード

```ここに言語名を入力
ソースコード
``
`<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WBC Cafe - NEWS</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/favicon.png">
  </head>

  <body>
    <div id="news" class="big-bg">
      <header class="page-headerwrapper">
        <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
        <nav>
          <ul class="main-nav">
            <li><a href="news.html">News</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>

        <div class="wrapper">
          <h2 class="page-title">News</h2>
        </div><!-- /.wrapper　-->
      </header>
    </div>
    <div class="news-contentswrapper">
      <article>
        <header class="post-info">
          <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
          <p class="post-date">3/30 <span>2021</span></p>
          <p class="post-cat">カテゴリー:お店の紹介</p>
        </header>
        <img src="images/wall.jpg" alt="店内の様子">
        <p>
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
          おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
          おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
        </p>
        <p>
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
          おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
          おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
        </p>
        <p>
        体に優しい自然食を提供する、WCB CAFE。
      </p>
      </article>
      <aside>
        <h3 class="sub-title">カテゴリー</h3>
        <ul class="sub-menu">
          <li><a href="#">お店の紹介</a></li>
          <li><a href="#">期間限定メニュー</a></li>
          <li><a href="#">イベント</a></li>
          <li><a href="#">お客様との会話</a></li>

        </ul>

        <h3 class="sub-title">このお店について</h3>
        <p>
          体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
          おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされてください。
        </p>

      </aside>

      <div class="ad">
        <img src="images/banner.jpg" alt="新メニュー登場">

      </div>

    </div><!-- /.news-contents -->

    <footer>
      <div class="wrapper">
        <p><small>&copy; 2019 Mayubox</small></p>
        </div>
    </footer>
  </body>
</html>


＜CSS＞↓

@charset "UTF-8";


/*共通部分*/
html {
  font-size: 100%;
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color:#432;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/*HEADER*/

.logo {
  width: 210px;
  margin-top: 14px;
}

.main-nav {
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 34px;
  list-style: none;
}

.main-nav li {
  margin-left: 36px;
}

.main-nav a {
  color: #432;
}
.main-nav a:hover {
  color: #0bd;
}

.page-header {
  display: flex;
  justify-content: space-between;
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/*HOME*/

.home-content {
  text-align: center;
  margin-top: 10px;
}

.home-content p {
  font-size: 1.125rem;
  margin: 10px 0 42px;
}

/*見出し*/
.page-title {
  font-size: 5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
}

/*ボタン*/

.button {
  font-size: 1.375rem;
  background: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}

/*ボタンにカーソル当てた時の色を指定*/
.button:hover {
  background: #0090aa;
}

/*大きな背景画像*/

.big-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#home {
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}

#home .page-title {
  text-transform: none;
}


/* NEWS */

#news {
  background-image: url(../images/news-bg.jpg);
  height: 270px;
  margin-bottom: 40px;
}

#news .page-title {
  text-align: center;
}


/*フッター*/

footer {
  background: #432;
  text-align: center;
  padding: 26px 0;
}

footer p {
  color: #fff;
  font-size: 0.875rem;
}

/*メイン記事部分*/

article {
  width: 60%;
  order: 2;
}

/*サイドバー部分*/
aside {
  width: : 22%;
  order: 3;
}

.ad {
  order: 1;
}

.news-contents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.post-info {
  position: relative;
  padding-top: 4px;
  margin-bottom: 40px;
}

.post-date {
  background: #obd;
  border-radius: 50%;
  color: #fff;
  width: 100px;
  height: 100px;
  font-size: 1.625rem;
  text-align: center;
  position: absolute;
  top: 0;
  padding-top: 10px;
}

.post-date span {
  font-size: 1rem;
  border-top: 1px rgba(255,255,255,.5) solid;
  padding-top: 6px;
  display: block;
  width: 60%;
  margin: 0 auto;
}

.post-title {
  font-family: "Yu Mincho" "YuMincho", serif;
  font-size: 2rem;
  font-weight: normal;
}

.post-title,
.post-cat {
  margin-left: 120px;
}

article img {
  margin-bottom: 20px;
}

article p {
  margin-bottom: 1rem;
}

.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px #0bd solid;
  font-weight: normal;
}

aside p {
  padding: 12px 10px;
}

.sub-menu {
  margin-bottom: 60px;
  list-style: none;
}

.sub-menu li {
  border-bottom: 1px #ddd solid;
}

.sub-menu a {
  color: #432;
  padding: 10px;
  display:block;
}

.sub-menu a:hover {
  color: #0bd;
}

@media (max-width: 600px) {
    h1 {
      color: 0bd;
    }
  }

  /*モバイル版*/

  @media (max-width: 600px) {
    .page-title {
      font-size: 2.5rem;

    }

    .page-header {
      flex-direction: column;
      align-items: center;
    }

    /*NEWS*/

    .news-contents {
      flex-direction: column;
    }
    article,
    asise {
      width: 100%
    }



  /*HOME*/

  .home-content {
    margin-top: 20%;

  }

  #news .page-title {
    margin-top: 30px;
  }
  aside {
    margin-top: 60px;
  }

  .post-info {
    margin-bottom: 30px;
  }

  .post-date {
    width: 70px;
    height: 70px;
    font-size: 1rem;
  }
  .post-date span {
    font-size: 0.875rem;
    padding-top: 2px;
  }

  .post-title {
    font-size: 1.375rem;
  }
  .post-cat {
    font-size: 0.875rem;
    margin-top: 10px;
  }

  .post-title,
  .post-cat {
    margin-left: 80px;
  }
}


### 試したこと
ネットで配置の書き方等調べて色々試してみましたが、上手く行かないので
わかる方がいらっしゃれば
ご教示の程、よろしくお願いいたします。

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。``````![![![ここに言語を](808e796aabd83f4c71bf6d859ac21472.png)入力](031a8b1f56a088e67b6ac5d631dd5905.png)](46416901eca5eb651d5b028a5bbc2777.png)
ここに言語を入力

コード

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

回答1件

ベストアンサー

現状のHTMLはそのままでということなら、絶対配置で右上に配置すればどうでしょう。

css
1nav {
2  position: absolute;
3  top: 0;
4  right: 0;
5}

投稿2021/07/05 04:52

hatena19

総合スコア33699

mayugee228

2021/07/18 14:09

返事が遅くなってしまい申し訳ありません。。無事できました！！回答有り難うございましたm(_ _)m

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

ナビゲーションメニューの配置を右上にしたい。

前提・実現したいこと

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

関連した質問