How can I exclude a certain class from inheriting property in CSS - html

Question

I have circular logo here as you can see , I'm trying to have my circle logo and "name" and "family" around it , like : "name" logo "family" and I want to exclude "container" from being flex child because I want to align them left not center here's my codes:
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
flex-direction: row-reverse;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>
note: I want flexbox inside my container (it's children) but exclude container itself from being flex element and being centralized.

Answer 1

You don't need to use display: flex on your header, since you can use margin: 0 auto on the name-fam div. Also, not sure why row-reverse was used on nam-fam since the elements are in the order you wanted in the markup.
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
margin: 0 auto;
justify-content: center;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>
If you want to keep display: flex on the header
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
/* Change to row */
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
}
/* Add this to container to make sure it's 100% width so it will not appear to be centered */
.container {
flex: 0 0 100%;
max-width: 100%;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>