Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to the right. Here's the relevant HTML and CSS:
main{
display: flex;
position: relative;
justify-content: space-between;
}
#image{
height: 80vh;
box-shadow: 8px 3px 10px gray;
margin: 10px;
border-radius: 1%;
}
.text{
animation: fade-in;
animation-duration: 2s;
margin-left: 20px;
padding-left: 40px;
margin-right: 10px;
padding-bottom: 20px;
margin-bottom: 20px;
@media screen and (max-width: 500px){
.main{
position: static;
flex-direction: column;
box-sizing: unset;
}
#image{
display: block;
position: static;
}
<main>
<div class="text">
<h1></h1>
<p></p>
<p></p>
<button </button>
<button </button>
</div>
<img id="image" src="/images/image1.jpg" alt="">
</main>