headerのナビが調整できない

Question

前提・実現したいこと

headerにあるnavの位置をずらしたいです。
今の状態だと、navの位置が変な場所にあるため右側に余白をつけて調整したいです。
margin-rightをつけているのですが、cssが効かないです。

理想としては、どのサイズの画面でも右側に余白をつけられるようにしたいです。
px単位だと画面が小さくなると余白の幅が相対的に広くなってしまうので%単位でしたいのです。

該当のソースコード

    <header>
    <nav class="nav">
      <ul>
        <li><a rel="home" href="home.html">Home</a></li>
        <li><a rel="profile" href="home.html">Profile</a></li>
        <li><a rel="work" href="home.html">Work</a></li>
        <li><a rel="content" href="home.html">Content</a></li>
      </ul>
    </nav>
  </header>

header {
  position: fixed;
  top: 0;
  left: 70%;
  z-index: 1;
  padding-top: 10px;
}

.nav {
  width: 500px;
  margin-left: auto;
  margin-right: 10%;
}

.nav ul {
  display: flex;
}

.nav ul li {
  list-style-type: none;
  margin-right: 30px;
  text-shadow: black 1px 1px 0, black -1px 1px 0,
    black -1px 1px 0, black 1px -1px 0,
    black 0px 1px 0, black 0 -1px 0,
    black -1px 0 0, black 1px 0 0;
}

.nav ul li:hover {
  transform: scale(1.3, 1.3)
}

.nav a {
  color: #FFF;
  font-family: 'Akaya Telivigala',
    cursive;
  font-weight: normal;
  font-size: 30px;
}

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

macOS
visual studio code

Answer 1

画面の右側の余白を10%にしたいということなら、下記の２つのどちらかでどうでしょう。

header {
  position: fixed;
  top: 0;  
  z-index: 1;
  padding-top: 10px;
  width:100%;
}

.nav {
  width: 500px;
  margin-left: auto;
  margin-right: 10%;
}

header {
  position: fixed;
  top: 0;
  right: 10%;
  z-index: 1;
  padding-top: 10px;
}

.nav {
  width: 500px;
}

２つの差は header の幅です

Answer 2

headerにleft:70%;がついていたことが原因でした。

header内をnavが移動できるようにしたかったので、headerにwidth:100%;を指定。

navにwidth:400px;、margin-right:5%;を指定したらできました。

Answer 3

headerにleft:70%;がついていたことが原因でした。

navをheader内で移動できるようにしたかったので、headerにwidth:100%;を指定。navにwidth:400px;、margin-rignt:5%;を指定して調整したらできました。

Answer 4

headerに当ててるleft: 70%;これをright: 5%;に変えてみるのはどうでしょう？
「左端からどれくらい」ではなくて、「右端からどれくらい」という風にすると、
レスポンシブでもいい感じになりましたよ。

余白を広くしたい場合はお好みで％の数字を増やしてくださいね。

Comments

[tetsuya7724]

自己解決できました。回答ありがとうございます！