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">

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

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

.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.