Despite my efforts, I haven't been able to figure this out successfully. My goal is to align the text elements next to the image just like in the example picture below. Initially, I achieved this using absolute positioning.
However, I also need my page to be responsive. So, I opted for a flexbox container to place the text and image elements side by side with equal spacing when resizing the window. But as soon as I enlarge the image, the content area seems to ignore the padding margins and parent container, leading to a scroll bar on the window width and a plain white background.
I would greatly appreciate any insights into what I might be doing incorrectly here. Additionally, I am open to alternative methods that can help me achieve the desired effect I'm aiming for.
Here's the code snippet:
<body>
<header>
<div class="container">
<div class="justify">
<div class="inline">
<h1>App Name</h1>
<h2>Download on the App Store!</h2>
<a href="https://www.apple.com/uk/app-store/" target="_blank"><img class="downloadimg" src="appstore.png" alt="Download Link">
</a>
</div>
<div class="inline">
<img class="werewolf" src="werewolf.png" alt="App Logo">
</div>
</div>
</div>
</header>
</body>
</html>
CSS:
body{
margin: 0px;
padding: 0px;
font-family: 'Bebas Neue', cursive;
}
header{
background-color: aqua;
font-size: 40px;
padding-left: 10%;
padding-top: 10%;
padding-bottom: 10%;
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.justify{
display: flex;
align-items: center;
justify-content: space-between;
}
.downloadimg{
width: 50%;
}
.inline{
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.werewolf{
width: 140%;
}