So I’m trying to put my images on the same line, but I’m not quite sure how to do so. So I took screenshots of some of my code and how it displays:
Hello friend! 
To help you with your question, could you please share an image of your HTML code? From what I can see, I think it has to do with changing the flexbox properties you have for each element.
Hello again!
Well, to start with, you should consider the type of property you’re applying to the elements within the parent container (pic). The one you’re using, “justify-content: space_evenly,” is not the correct one. Additionally, you need to consider the size of each image; you’re only setting the “width” property for each of them.
Check out this very useful guide; it might clarify your doubts about flexbox: A Complete Guide To Flexbox | CSS-Tricks
For now, try this 
:
.pic {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.multianime {
width: 33%;
height: auto;
}
.manga {
width: 33%;
height: auto;
}
.draw {
width: 33%;
height: auto;
}
If you still have doubts, don’t worry; feel free to ask! 
Ok, please. Let me see the styles and the HTML code again…
Yes, of course, that’s happening because the image is larger than its container. Now we need to define a size for each “img” element so that it fits within its container.
Can you manage to figure out how to do it?
Trying with object-fit, and now overflow: hidden and auto.
How about trying by just applying the following style:
img {
width: auto;
height: auto;
}
It works, just that you have to scroll to the right to see all of the images.
Okay, check the chat
