if anybody could help me solve what's causing this purple blocked-out box in my #header-content it would be greatly appreciated.
#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 >
<li><a href="#" >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>
CodePudding user response:
[Edited]
Purple blocked-out box are default flex-box behaviour, which prevents flex-boxes of becoming smaller than it's contents.
it can solved by:
1 .You remove purple blocked-out box by use inline-block
#header-content { display: inline-flex; padding-top: 100px; padding-left: 100px; padding-right: 100px; }
The display:inline-flex
does not make flex items display inline. It makes the flex container display inline. The main difference between display: flex
and display: inline-flex
is that display: inline-flex
will make the flex container an inline element while its content maintains its flexbox properties.
- Removed it by giving full properties to control to child's eg:
#header-content { display: flex; padding-top: 100px; padding-left: 100px; padding-right: 100px; } #image-1 { width: 50vw; margin-right: 100px; }
- Control the purple blocked-out box using justify-content properties
#header-content { display: flex; justify-content: space-between; padding-top: 100px; padding-left: 100px; padding-right: 100px; }