元素宽度显示不正确

Question

问题是我的header的固定宽度为150px，但在浏览器中显示为134.984像素，我无法弄清楚原因。我已经尝试过，我能想到但没有任何效果。我唯一能够弄清楚的是它是推动content-wrap并使其变小的header弹性项目。

这是HTML：

＆＃13;

＆＃13;

/*======= Container =======*/

#container{
	display: flex;
	flex-direction: row;
	min-height: 100vh;
}

#content-wrap {
	width: 100%;
}
/*======= Sāna izvēlne / header =======*/

header {
	min-height: 100vh;
	width: 150px;
	margin: 0;
}

.header-position {
	width: inherit;
	height: 100vh;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

nav {
	background-color: #ffffff;
}

nav ul{
	padding: 0;
	margin: 0;
}

nav li, a {
	text-decoration: none;
	list-style-type: none;
	text-align: right;

	font-size: 1em;
	color: black;

}



.logo {

	background: url("../images/AG.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 80px;
}

/*======= Banneris =======*/

.banner-container {
	background-image: url("../images/lp-background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 300px;
	clear: right;
}

.banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.banner h1 {
	color: white;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.4em;
	border: solid 10px white;
	padding: 20px 30px;
}

/*======= Par mums =======*/

#about {
	width: 100%;
	height: 300px;
	background-color: pink;
}

#about .first, .second {
	width: 50%;
	height: 100%;
	display: inline-block;
}

#about .first {

}
#about .second {
	float: right;
}

.about-picture {
	height: 200px;
	width: 200px;
	margin: 50px 50px;
	border-radius: 150px;
	border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
	float: right;
}
img.right {
	float: right;
}

＆＃13;

<div id="container">
	<header>
		<div class="header-position">
			<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>

			<nav>
		 		<ul>
		 			<li><a href="#">Sākums</a></li>
					<li><a href="#">Attēli</a></li>
					<li><a href="#">Kontakti</a></li>
					<li><a href="#">Par mums</a></li>
		 		</ul>
		 	</nav>
			<a href="mailto:">Sazinies ar mums</a>
		</div>
	</header>

	<div id="content-wrap">

			<div class="banner-container">

				<span class="banner"><h1>Whatever</h1></span>

			</div>

			<div id="about">
				<div class="first">
					<img class="about-picture left" src="./images/lp-background.jpg" alt="" />

				</div>
				<div class="second">
					<img class="about-picture right" src="./images/lp-background.jpg" alt="" />

				</div>
			</div>

	</div>

＆＃13;

＆＃13;

＆＃13;

如何获得＆＃39;标题＆＃39;要正确显示吗？

Answer 1

因为它是一个弹性项目，所以你需要相应地设置它的弹性属性。

$("#viderror")

＆＃13;

＆＃13;

javascript

＆＃13;

header {
    min-height: 100vh;
    width: 150px;
    margin: 0;
    background-color: red;
    flex: 0 0 150px; /* don't grow, don't shrink, be 150px wide */
  }

＆＃13;

＆＃13;

＆＃13;