I´m working on a challenge for Front End Mentor on VSCode and I need the image and text to be RIGHT next to each other. Right now, they have too much space between them. I was thinking that it could be rectified by putting them both in a box. Am I right?
I copy and pasted the code into CodePen and a link is below. (The image doesn´t show up since it´s saved to my computer.)
For starters, definitely do not put a fixed width on the body element.
If you tell the image that it can only be half the size of its container then it will be half the size and it will be left aligned inside the container as all elements do by default (left to right writing).
You can set the image to display: block and use a left auto margin on it. Or you can make the image container a flex container and use justify-content: flex-end (without a flex-basis depending on the size you are going for)
Why should I not put a fixed width on the body element?
Possibly because you want the body element to stretch wide for larger screens and to shrink for smaller ones.
Because doing that would be the definition of a non-responsive design. If you lower the screen width below the fixed width set the page will overflow.
You should at all times avoid fixed width and height. Use max-width and min-height when at all possible. There are very few use cases for a fixed width/height on any element.
Also, setting a width on the body doesn’t really make much sense. You might have a container element inside the body with a max-width but you wouldn’t set it on the body element.
I’d suggest learning a bit more about layout and responsive design.
