I am struggling with positioning a child .div containing rotating images to the right side of its parent (header) .div. I am utilizing the flexbox model for layout purposes.
Despite my efforts, the solutions I have come across so far have not yielded the desired result. Below is the CSS code snippet in question:
/* Styling for the header */
.header {
position: relative;
background-image: url("images/code.jpg");
background-color: black;
background-repeat: no-repeat;
background-size: cover;
color: white;
padding: 10px 30px 20px 150px; /* Top - Right - Bottom - Left shorthand padding notation*/
text-align: left;
font-size: 30px;
text-shadow: 4px 4px darkorange;
}
/* Styling for header image */
}
.child{
width:100px;
height:100px;
background-color:#999999;
position:absolute;
bottom:0px;
right:0px;
}<div class="header">
<h1>Eric Launderville</h1>
<p style="font-size: 35px" >IT Support Specialist</p> <br>
<div class="child">
Hello
</div>
<div id="mySidenav" class="sidenav">
<a href="#" id="home"><i class="fa-solid fa-house fa-beat-fade fa-lg" style="color: #ffffff;"> </i>Home</a>
<a href="#" id="about"><i class="fa-solid fa-laptop-code fa-beat-fade fa-lg" style="color: #ffffff;"> </i>About</a>
<a href="#" id="contact"><i class="fa-solid fa-address-book fa-beat-fade fa-lg" style="color: #ffffff;"> </i>Contact</a>
<a href="#" id="email"><i class="fa-solid fa-at fa-beat-fade fa-lg" style="color: #ffffff;"> </i>E-mail</a>
<a href="#" id="facebook"><i class="fa-brands fa-facebook fa-beat-fade fa-lg" style="color: #ffffff;"> </i>Facebook</a>
<a href="#" id="linkedin"><i class="fa-brands fa-linkedin-in fa-beat-fade fa-lg" style="color: #ffffff;"> </i>LinkedIn</a>
</div>
</div>