Image aligned to left - html

Question

Please check link for more details on my code. I need to have the placeholder image aligned to left of the screen i.e. to the bank white space as illustrated by the shared code.
* {
margin: 0;
padding: 0;
}
main{
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
aside {
width: 300px;
height: 100vh;
background-color: red;
}
article {
width: 100%;
max-width: 500px;
height: 100vh;
background-color: green;
}
figure {
padding-top : 50%;
position:relative;
img {
top:0;
left:0;
right:0;
bottom: 0;
position: absolute;
max-width: 100%;
width: 100%;
}
}
<main>
<article>
<figure>
<img src="http://via.placeholder.com/350x150" alt=""> </figure>
</article>
<aside>
</aside>
</main>

Answer 1

Remove:
justify-content: flex-end;
from .main in your CSS.

Answer 2

In .main css you can remove justify-content or set it with flex-start, If you want to take red section in right and the image in left you can set justify-content space-between.

Answer 3

Do you mean this?
* {
margin: 0;
padding: 0;
}
main{
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
aside {
width: 300px;
height: 100vh;
background-color: red;
}
article {
width: 100%;
max-width: 500px;
height: 100vh;
background-color: green;
}
figure {
padding-top : 50%;
position:relative;
img {
top:0;
left:0;
right:0;
bottom: 0;
position: absolute;
max-width: 100%;
width: 100%;
}
}
img{
width:100%
}
<main>
<img src="http://via.placeholder.com/350x150" alt="">
<article>
<figure>
</figure>
</article>
<aside>
</aside>
</main>

Answer 4

Issue is here. When you set a max-width, when the size is more than 500px + 300px of the sidebar, you get the white space.
article {
width: 100%;
/*Issue is here.*/
max-width: 500px;
height: 100vh;
background-color: green;
}
To use the same code, you need to adjust the code to this. I will comment out the unnecessary part so you can delete them as you follow the code.
* {
margin: 0;
padding: 0;
}
main{
/*width: 100%;*/
display: flex;
flex-direction: row;
justify-content: flex-end;
}
aside {
width: 300px;
height: 100vh;
background-color: red;
}
article {
/*
This is fine but use the flexbox syntax flex: 1 or flex-basis: 100% to get the remaining space from aside.
width: 100%;*
/
/*Issue is here.
max-width: 500px;
*/
flex: 1;
height: 100vh;
background-color: green;
}
figure {
/*
Not needed.
padding-top : 50%;
position:relative;
*/
img {
/*
top:0;
left:0;
right:0;
bottom: 0;
position: absolute;
max-width: 100%;
width: 100%;
*/
/*To make the image responsive and fit figure tag*/
max-width: 100%;
height: auto;
}
}
<main>
<article>
<figure>
<img src="http://via.placeholder.com/350x150" alt=""> </figure>
</article>
<aside>
</aside>
</main>
Or else restructure your markup to have the figure + image out of the article into main