'I would like the header logo and main visual to be aligned vertically

Prerequisites

The header logo and main visual are side by side. Screen shot

Expected value

I want the header logo and main visual to be aligned vertically.I would like to do something like this URL.

Reproduction procedure

Run the code below.

body {
    height: 1295.83px;;
    width: 1263px;
    display: flex;
    justify-content: center;
}

.header__container {
    height: 17.83px;
    width: 1000px;
    font-size: 14px;
    font-family: Meiryo;
    margin: 60px 0px 0px;
    .header__logo {
        height: 17.83px;
        width: 160px;
    }
}

.container__main {
    height: 1295.83px;
    width: 1263px;
    main {
        height: 1118px;
        width: 1000px;
        .main__mainvisual {
            height: 400px;
            width: 1000px;
        }
    }
}
<!DOCTYPE html>
<html lang="ja">
<body>
    <header class="header__container">
        <img class="header__logo" src="image/logo.svg" alt="PHOTO BOOK">
    </header>
    <div class="container__main">
        <main>
            <img class="main__mainvisual" src="image/mainvisual.jpg" alt="メインビジュアル">
        </main>
    </div>
</body>
</html>
htmlsassbem


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions