javascript - header 比父元素宽60％？

我新网站上的标头比正文宽约60％，并且可以x滚动。根本不应该有任何溢出。我在ul周围放置了边框以进行检查，但这不是问题。我的JS和CSS之间有冲突吗？

    html {
	width: 100%;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



.header {
	display: block;
	position: fixed;
	background-color: #222323;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

	-webkit-transform-origin: center top;
	transform-origin: center top;
}

.logo img {
	display: block;
	position: relative;
	width: 50%;
	margin: 0 auto;
	margin-top: 9%;
	z-index: 100;
	opacity: 0;
	-webkit-transform-origin: center top;
	transform-origin: center top;
}


ul {
	z-index: 101;
	list-style: none;
	position: relative;
	top: 60px;
	margin: 0;
	padding: 0;
	opacity: 0;

}

    <script type="text/javascript">
		function init() {

		var intro = document.getElementsByTagName('img')[0];
		var head = document.getElementsByClassName('header');
		var logo = document.getElementsByTagName('img');
		var nav = document.getElementsByTagName('ul');
		var tl = new TimelineLite();

			tl.to(intro, 2, {opacity: 0.5, delay:1})
			tl.to(intro, 1, {opacity: 1}, 2)
			tl.to(head, 1, {scaleY: 0.2}, 3)
			tl.to(logo, 1, {scaleX:0.2}, 3)
			tl.to(nav, 2, {opacity: 1}, 4.5);
		}
	</script>
</head>

<body onLoad="init()">
	<div class="header" id="head">
		<a class="logo" href="index.html"><img id="logo" src="img/logo-white.png"></a>
	</div>
	<ul id="navbar">
		<div class="left">
			<li><a href="index.html" id="home" class="hoverbox">home</a></li>
			<li><a href="about.html" id="about" class="hoverbox">about</a></li>
			<li><a href="services.html" id="services" class="hoverbox">services</a></li>
		</div>
		<div class="right">
			<li><a href="work.html" id="work" class="hoverbox">work</a></li>
			<li><a href="process.html" id="process" class="hoverbox">process</a></li>
			<li><a href="contact.html" id="contact" class="hoverbox">contact</a></li>
		</div>
	</ul>

最佳答案

滚动导航是由div.right引起的。在您的.right类中，您具有left: 840px;，这会将元素向右移出视口，因此导致滚动。一个快速的解决方案是设置position: absolute和right: 0：

.right {
  display: block;
  position: absolute;
  left: 840px;
  right: 0;
}

但是我会认真考虑审查所有代码（css和html），因为似乎有很多地方用错了。

关于javascript - header 比父元素宽60％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31778990/