<nav>不会遵守身体</nav>

Question

我真的不确定我的头衔是否正确。呵呵。但幸运的是，我可以在图片中解释我的问题; - ）

我的问题是：

body {
  font: calibri;
  background-color: #2d2e29;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 0px;
  margin-top: 0px;
}
p {
  margin: 0px;
}
nav {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: #FFFFFF;
  opacity: 0.75;
  top: 0;
  left: 0;
  margin-left: 150px;
  margin-right: 150px;
}
nav ul {
  float: right;
  list-style-type: none;
  padding: 0;
  margin-top: 30px;
  margin-right: 30%;
}
nav li {
  display: inline;
}
nav a {
  margin: 5px;
  color: black;
}
nav a:hover {
  color: #99cccc;
}
#Forside {
  background-color: #3f5c93;
  height: 800px;
}
#Mig {
  background-color: #ccc2a6;
  height: 800px;
}
#Faerdigheder {
  background-color: #3f5c93;
  height: 800px;
}
#Projekter {
  background-color: #ccc2a6;
  height: 800px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#Kontakt {
  background-color: #3f5c93;
  height: 800px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#logo {
  height: 100%;
  width: 200px;
  background: url("Logo.png");
  margin-top: 10px;
  margin-left: 50px;
  background-repeat: no-repeat;
  position: absolute;
  background-size: 200px;
}

<div id="all">
  <nav>
    <!-- navigations-element (menu) -->
    <div id="logo"></div>
    <ul>
      <li>
        <!-- internt link: relativ URL -->
        <a class="nav" href="#Forside">
										Forside 
									</a>
      </li>
      <li>
        <!-- internt link: relativ URL -->
        <a class="nav" href="#Mig">
										Mig 
									</a>	
      </li>
      <li>
        <!-- internt link: relativ URL -->
        <a class="nav" href="#Faerdigheder">
										Færdigheder
									</a>
      </li>
      <li>
        <!-- internt link: relativ URL -->
        <a class="nav" href="#Projekter">
										Projekter 
									</a>	
      </li>
      <li>
        <!-- internt link: relativ URL -->
        <a class="nav" href="#Kontakt">
										Kontakt
									</a>	
      </li>
    </ul>
  </nav>
  <div id="Forside">
    <br>
    <br>
    <br>
    <br>
    <br>Forside
  </div>
  <div id="Mig">
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="meleft">
      <h1>Mig</h1>
      <p class="textleft">Lots of words
      </p>
    </div>
    <div class="meright">
      <img src="sdp.png" alt="sdp" id="sdp1" />
    </div>
  </div>
  <div id="Faerdigheder">
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="skillsleft">
      <img src="Collage1.png" alt="Collage" id="Collage" />
    </div>
    <div class="skillsright">
      <h1>Færdigheder</h1>
      <p class="textright">Lots of words
      </p>
    </div>
  </div>
</div>

我添加了我的代码，所以你可以看到问题： http://jsfiddle.net/9Lj6ck3L/

我希望你能理解这些代码，即使有些单词是丹麦语： - ）

Answer 1

鉴于提供的HTML和CSS，请将nav的宽度设置为calc(100% - 300px);

Demo Fiddle

否则你会告诉它是完整的视口宽度，从左边偏移150px，这就是为什么它似乎溢出到右边。使用calc你可以说，“很好，伸展到视口宽度，但减去边距”

Answer 2

工作小提琴 - http://jsfiddle.net/9Lj6ck3L/11/

更改了标题栏的宽度。

nav {
                    position:fixed;
                    width:63.5%;
                    height:80px;
                    background-color:#FFFFFF;
                    opacity:0.75;
                    top:0;
                    left:0;
                    margin-left:150px;
                    margin-right:150px;
                }

希望这有帮助。

Answer 3

您的问题是position:fixed。此元素在宽度方面不会从它的父级继承任何内容。

您最好的选择是将导航包装在另一个<div>中并使该位置固定。然后在其中提供<nav>所需的宽度。

将<nav>移到#all div之外，将您的边距放在#all而不是身体上。

然后提供<nav> {c} box-sizing: content-box或box-sizing: padding-box来解决宽度问题。