html排版问题仿B站首页

问题遇到的现象和发生背景 上次提问的问题还没有被我解决，希望得到各位学霸的帮助！！

这是我的代码

img

img

img

这是运行结果

img

用各种标签都没有用。
望回复。

拍一下目标效果图

可以写响应式 也可以用vw 做布局 屏幕缩放也不会影响布局


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .Haderrecommend{
         width:90vw;
         height:20vw;
         display: flex;
         margin: 0px auto;
         justify-content: space-between;
     }
     .Haderrecommend>.banner{
         width:35%;
         height:100%;
         background: rebeccapurple;
     }
     .Haderrecommend>.taglist{
         width:64%;
         height:100%;
         background: rebeccapurple;
     }
</style>
<body>
     <div class="Haderrecommend" >
          <div class="banner" ></div>
          <div class="taglist" ></div>
     </div>
</body>

</html>