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


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">
    <header class="header__container">
        <img class="header__logo" src="image/logo.svg" alt="PHOTO BOOK">
    <div class="container__main">
            <img class="main__mainvisual" src="image/mainvisual.jpg" alt="メインビジュアル">

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum