.middle-site-content-container {
width: auto;
height: auto;
border: 2px red solid;
display: flex;
/*Le pot pozitiona in line*/
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
margin: auto;
}
.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
height: auto;
width: auto;
margin: 2rem;
padding: 2rem;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background-color: #f2f2f2;
color: #333;
}
.middle-site-content-1 {
border: red 2px solid;
}
section.middle-site-content-container img {
display: block;
max-width: 24rem;
max-height: 15rem;
height: auto;
width: auto;
margin: auto;
}
section.middle-site-content-container h1 {
padding: 1rem;
height: auto;
margin: auto;
max-width: 24rem;
max-height: 15rem;
}
section.middle-site-content-container p {
padding: 0.5rem 0.1rem 0.3rem 1.5rem;
text-align: left;
max-width: 24rem;
max-height: 10rem;
height: auto;
margin: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.middle-site-content-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
flex: 1 1 30rem;
margin: 2rem;
padding: 2rem;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background-color: #f2f2f2;
color: #333;
}
.middle-site-content-1 {
border: 2px solid red;
}
.middle-site-content-container img {
max-width: 100%;
max-height: 15rem;
margin: auto;
}
.middle-site-content-container h1 {
padding: 1rem;
margin: 1rem 0;
}
.middle-site-content-container p {
padding: 0.5rem 0.1rem 0.3rem 1.5rem;
text-align: left;
max-height: 10rem;
margin: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-bar-container-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 2rem;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin: 0;
}
nav ul li {
margin-left: 1rem;
}<section class="middle-site-content-container">
<div class="middle-site-content-1">
<img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
<h1>ELDEN RING PATCH NOTES </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
</div>
<div class="middle-site-content-2">
<img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
<h1>Valorant Patch notes </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
</div>
<div class="middle-site-content-3">
<img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
<h1>CS go updates </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
</div>
<div class="middle-site-content-4">
<img src="eldenring-patchnotes-v109.
........... (text too long to display) .....
t;">link</li>
</ul>
</nav>
</div>
</section>Trying to arrange elements within a <section>, specifically placing a nav bar on the right side of the section while keeping other items centered within it.
Inexperienced with these techniques, struggling to achieve the desired layout despite attempting various methods found online that didn't maintain the specific positioning requirement. Even experimenting with position: absolute resulted in overlapping content.
The current layout:
Rather than anticipated