curriculum/challenges/english/blocks/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
The ::after pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same width as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set justify-content: center on the flex container.
Example:
.container::after {
content: "";
width: 860px;
}
Create a new selector using an ::after pseudo-element on the .gallery element. Add a content property set to an empty string "" and 350px set for the width property.
Your .gallery::after selector should have an empty string "" set for the content property.
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content, "\"\"");
Your .gallery::after selector should have 350px set for the width property.
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width, "350px");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
--fcc-editable-region--
--fcc-editable-region--