I want to know why the video and the second container don't center in the middle of the page when I gave it the justify-content as you see in the third and fourth container the boxes align in the middle.
I tried everything, from margin to float to grid, but it's not working. Again sorry for the question but I'm a beginner in this game.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
@media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
@media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
<a href="" target="_blank" class="current-page">Home</a>
</li>
<li class="nav-link"><a href="" target="_blank">Product</a></li>
<li class="nav-link"><a href="" target="_blank">Support</a></li>
<li><a href="" target="_blank">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
