if anybody could help me solve what’s causing this purple blocked-out box in my #header-content it would be greatly appreciated.
I don’t know it won’t let me post it wants some more information
why does it keep asking for more information
come on i shouldn’t have to type this much stuff
#header {
background-color: #343c63;
height: 400px;
}
.main-nav {
display: flex;
padding: 0px 100px 0px 100px;
list-style: none;
}
.main-nav li:first-child {
margin-right: auto;
}
.main-nav a {
margin: 10px;
color: white;
text-decoration: none;
}
#header-content {
display: flex;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
}
#image-1 {
margin-right: 100px;
}<html>
<head>
<title>top-flex-box</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="header">
<nav>
<ul class="main-nav">
<li><a href="#" class="logo">Header Logo</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</nav>
<div id="header-content">
<div>
<h1>This website is awesome</h1>
<p>This website has some subtext that goes here under the main title. It's smaller font and the color is lower contrast.</p>
</div>
<div id='image-1'>
<p>this is a placeholder for an image</p>
</div>
</div>
</div>
</body>
</html>>Solution :
please attached your html too.
but is assumed this happened because your div container #header-content as parrent didn’t have width with fixed value,
#header-content {
display: flex;
width: 100vw;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
}