２カラムレイアウトをhtmlとcssのみで再現したいですが、うまくできない

夜分遅くにすみません。

リンク内容
上記のページのような左半分を画像固定、右半分だけはスクロールできるレイアウトを再現したいと思い、作成していたのですが、下記画像のようになってしまいうまく再現できませんでした。

index.html

html
1<html>
2    <head>
3        <meta charset="utf-8">
4        <link rel="stylesheet" type="text/css" href="./style.css" />
5        <title>Aya Murata | 2018</title>
6    </head>
7    <body>
8    <div class="wrapper">
9  <div class="column cat1">
10    <div class="info">
11      <h2><a href="#"><img src="imgs/twitter.png" alt="" class="twitter"></a></h2>
12      <h2><a href="#"><img src="imgs/instagram.png" alt="" class="insta"></a></h2>
13    </div>
14  </div>
15  <div class="column cat2">
16    <ul>
17        <li><img src="imgs/amtop.png" width="940" height="580" >skill</li>
18        <li><img src="imgs/write.png" width="940" height="580" >gallary</li>
19        <li><img src="imgs/hand.png" width="940" height="580" >from</li>
20        <li><img src="imgs/fog.png" width="940" height="580" >concept</li>
21      </ul>
22  </div>
23</div>
24    </body>
25</html>

style.css

body {
    background: #000;
    font-family: "Nico Moji", sans-serif;
}

.column {
    height: 100vh;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
    .info {
        margin-bottom: 10%;
    }
    h2 {
        font-size: 3rem;
        margin-bottom: 10px;
    }
    p {
        font-size: 1.5rem;
    }
    a {
        font-size: 2rem;
        background: #fff;
        border-radius: 5px;
        padding: 10px 20px;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        margin-top: 18px;
    }
    a:hover {
        background: #0090aa;
    }

.twitter {
    width: 50px;
    heoght: 50px;
}

.insta {
    width: 50px;
    height: 50px;
}

.cat1 {
    background: url(imgs/white.jpg) no-repeat top center;
    background-size: cover;
}
.cat2 {
    background: url(imgs/white.jpg) no-repeat top center;
    background-size: cover;
    color: rgba(0,0,0,.7);
}

@media all and (min-width: 500px) {
  .wrapper {
    display: flex;
  }
}

詳しい方、どなたかご教示いただければと思います。

行動規範の内容に同意します

回答1件

こんばんは。
このような表現であってますか？
細かいタグは省略してます。

▼html

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <title>Aya Murata | 2018</title>
    </head>
    <body>
    <div class="wrapper">
  <div class="column cat1">
    <p>texttexttexttexttexttexttexttexttexttexttexttext<br>
    texttexttexttexttexttexttexttexttexttexttext</p>
  </div>
  <div class="column cat2">
    <ul>
        <li>skill</li>
        <li>gallary</li>
        <li>from</li>
        <li>concept</li>
      </ul>
  </div>
</div>
    </body>
</html>

▼CSS

body {
    background: #000;
}
.wrapper {
    position: relative;
}
.column.cat1 {
    background-color: #87cefa;
    width: 30%;
    height: 100vh;
    position: fixed;
}
.column.cat2 li{
    height: 50%;
}
.column.cat2 li:nth-child(odd){
    background: #eee8aa;
}
.column.cat2 li:nth-child(even){
    background: #ffc0cb;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ol, ul{
    list-style:none;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

投稿2018/08/10 16:08