HTML/ CSS: placing section on right side of the screen using flexbox - html

Question

I wonder how I can place the section class="teacher__section on the right side of the screen using flexbox. Not by float. I have written "justify-content: flex-end;", width 80% also 100% but it doesnt seem to be placing on right side.
I mean I have on the picture below succeeded placing the section on the right side, but the problem now is the left side where I want to get rid of the extra white box and the extra box-shadow. I want it to go around the image just like in
<section class="explore__section"> where I have the box-shadow go around the image. Source code is under below the image.
Source code:
.explore__container {
margin: 5% 0 2% 0;
display: flex;
width: 80%;
height: 10rem;
box-shadow: 1rem 1rem 1rem 1rem rgb(0, 0, 0, 0.2);
border-radius: 0rem 2rem 2rem 0;
}
.forkids__info {
flex-basis: 70%;
height: 100%;
background-color: bisque;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
margin-right: -20%;
}
.forkids__img {
background-image: url(/img/kids-science.jpeg);
flex-basis: 50%;
height: 100%;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 25% 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 0rem 2rem 2rem 0;
}
.teacher__section {
display: flex;
justify-content: flex-end;
width: 100%;
height: 10rem;
box-shadow: 1rem 1rem 1rem 1rem rgb(0, 0, 0, 0.2);
border-radius: 0rem 2rem 2rem 0;
}
.teacher__container {
display: flex;
justify-content: flex-end;
width: 100%;
height: 10rem;
box-shadow: 1rem 1rem 1rem 1rem rgb(0, 0, 0, 0.2);
border-radius: 2rem 0 0 2rem;
}
.teacher__info {
flex-basis: 70%;
height: 100%;
background-color: bisque;
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
margin-left: -20%;
text-align: right;
font-size: 2rem;
}
.teacher__img {
background-image: url(/img/teacher-science.jpg);
flex-basis: 50%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem 0 0 2rem;
}
<section class="explore__section">
<div class="explore__container">
<div class="forkids__info"> some text</div>
<div class="forkids__img"></div>
</div>
</section>
<section class="teacher__section">
<div class="teacher__container">
<div class="teacher__img"></div>
<div class="teacher__info">some text</div>
</div>
</section>

Answer 1

Try this solution, Hope this will help
<section class="explore__section">
<div class="explore__container">
<div class="forkids__info"> some text</div>
<div class="forkids__img"></div>
</div>
</section>
<section class="teacher__section">
<div class="teacher__container">
<div class="teacher__img"></div>
<div class="teacher__info">some text</div>
</div>
</section>
<style>
.explore__container {
margin: 5% 0 2% 0;
display: flex;
width: 80%;
height: 10rem;
box-shadow: 1rem 1rem 1rem 1rem rgb(0, 0, 0, 0.2);
border-radius: 0rem 2rem 2rem 0;
}
.forkids__info {
flex-basis: 70%;
height: 100%;
background-color: bisque;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
margin-right: -20%;
}
.forkids__img {
background-image: url(/img/kids-science.jpeg);
flex-basis: 50%;
height: 100%;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 25% 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 0rem 2rem 2rem 0;
}
.teacher__section {
display: flex;
justify-content: flex-end;
width: 100%;
height: 10rem;
border-radius: 0rem 2rem 2rem 0;
}
.teacher__container {
display: flex;
justify-content: flex-end;
width: 80%;
height: 10rem;
box-shadow: 1rem 1rem 1rem 1rem rgb(0, 0, 0, 0.2);
border-radius: 2rem 0 0 2rem;
}
.teacher__info {
flex-basis: 70%;
height: 100%;
background-color: bisque;
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
margin-left: -20%;
text-align: right;
font-size: 2rem;
}
.teacher__img {
background-image: url(/img/teacher-science.jpg);
flex-basis: 50%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem 0 0 2rem;
}
</style>