Silly little box problem

Hi! I’m trying to make a simple little box with a simple little piece of text and an image in it to test myself. I can’t seem to style it correctly so that everything fits where i want it to.

I want “Hello!” above “This is a Test” on the left side of the box, and an image centered on the right side. What am I doing wrong?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./styles3.css" rel="stylesheet">
</head>

<body>
    <div class="box">
        <div class="left-container">
            <div class="Hello">
                <h1>Hello!</h1>
            </div>
            <div class="test">
                <h3>This is a test.</h3>
            </div>
        </div>
        <div class="right-container">
            <img src="/tsw.jpg" alt="tsw" />
        </div>
    </div>
</body>

</html>
.box {
    border: 2px solid black;
    width: 200px;
    padding: 0 10px;
    display: flex;
}

.left-container {
    flex-direction: column;
    text-align: center;
    width: 49%;
    align-items: flex-start;
}

.hello {
    font-size: 17px;
}

.test {
justify-content: space-between;
}

.right-container {
    display: inline-block;
    flex-direction: left;
}

img {
    max-width: 80px;
    max-height: 80px;
    align-items: center;
}

okay i see what you want to do and i think it is so cool :wink:! To solve your problem you should look at your .right-container class. The display of your .right-container must be a flex and you should remove the flex-direction proprety. then add a display of block to your img css rule . After that put a margin of auto for top and bottom!
If you have any problem don’t hesitate! Happy coding! :+1: :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.