

HTMLとCSSの勉強をしています。  
以下のようなデザインなのですが、
**グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか？**  
[![画像の説明をここに入力](https://i.stack.imgur.com/R41TG.png)](https://i.stack.imgur.com/R41TG.png)

気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、  
select_test_areaクラスはheaderクラスの高さを選んでいないため、差分が発生しています。  
その原因を調べています。

恐れ入りますが、グレー背景にグリーンのボックスの底辺を合わせる方法がわかる方教えていただけますと幸いです。

▼HTML

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet"  href="css/common.css">
    <link rel="stylesheet"  href="css/home.css">
    <title></title>
    </head>
    <body>
      <header class="shadow">
        <p class="logo"><span class="logo_light"></span></p>
      </header>
      <main>
        <div class="select_test_area shadow">
          <h2 class="font-YuGothic">TEST</h2>
          <div class="wrapper">
            <div class="test_notes font-hiragino">
              <p class="title main_color">TEST</p>
              <p class="ditale main_color">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
            </div>
            <div class="test_list font-hiragino">
              <ul>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
                <li class="main_color_back">
                    <p class="title">TEST</p>
                </li>
              </ul>
    
            </div>
          </div>
        </div>
      </main>
    
    </body>
    </html>
    
[/code]

▼CSS

**common.css**

[code]

    /*--------------------------------------------------------------
       RESET
    --------------------------------------------------------------*/
    html{color:#000;background:#fff;height:100%}
    body{height:100%}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0}
    table{border-collapse:collapse;border-spacing:0}
    fieldset,img{border:0}
    address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
    ol,ul,li{list-style:none}
    caption,th{text-align:left}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
    q:before,q:after{content:''}
    abbr,acronym{border:0;font-variant:normal}
    sup{vertical-align:text-top}
    sub{vertical-align:text-bottom}
    input,textarea,select{font-size:inherit;font-weight:inherit;}
    legend{color:#000}
    *{zoom: 1; z-index: 0;}
    img{vertical-align: bottom;}
    :focus{outline:none;}
    a { text-decoration: none; }
    
    button, input, select, textarea {
      font-family : inherit;
      font-size   : 100%;
    }
    
    .clear { clear: left;}
    .clearBoth { clear: both;}
    
    input[type="submit"]::-webkit-search-decoration,
    input[type="button"]::-webkit-search-decoration {
      display: none !important;
    }
    input[type="submit"],
    input[type="button"] {
      -webkit-box-sizing: content-box;
      -webkit-appearance: button;
      appearance: button;
      box-sizing: border-box;
      cursor: pointer;
    }
    
    .main_color {
      color: green;
    }
    
    .main_color_back {
      background-color: green;
    }
    
    .shadow {
      box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
    }
    
    /*--------------------------------------------------------------
        header
    --------------------------------------------------------------*/
    header {
      width: 100%;
      height: 70px;
      background-color: #F2F2F2;
      float: left;
    }
    
    header img {
      width: 50px;
      float: left;
    }
    
    header .logo {
      float: left;
      font-family: 'Oswald', sans-serif;
      font-weight: bold;
      color: #000;
      font-size: 30px;
    }
    
    header .logo_light {
      font-weight: lighter;
    }
    
    header a {
      width: 150px;
      height: 40px;
      float: right;
      text-align: center;
      line-height: 40px;
      margin-top: 15px;
      margin-right: 30px;
      background-color: #FFF;
        border-radius: 20px;
    }
    
    /*--------------------------------------------------------------
        Font
    --------------------------------------------------------------*/
    @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');
    
    .font-YuGothic {
      font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
    }
    .font-hiragino {
      font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    }
    
    /*--------------------------------------------------------------
        scrollbar
    --------------------------------------------------------------*/
    ::-webkit-scrollbar{
      width: 10px;
    }
    ::-webkit-scrollbar-track{
      background: #EFFCFF;
      border: none;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb{
      background: green;
      border-radius: 10px;
      box-shadow: none;
    }
    
[/code]

**home.css**

[code]

    main {
      width: 100%;
      height: 100%;
      background-color: #504d4d;
    }
    
    h2 {
      padding: 5%;
      color: #717171;
      font-size: 1.7vw;
      font-weight: bold;
    }
    
    .select_test_area {
      width: 32%;
      height: auto;
      max-height: 90%;
      margin: 15px 0 auto 20px;
      text-align: center;
      background-color: #FFF;
      float: left;
    }
    
    .select_test_area .wrapper {
      width: auto;
      max-height: 74vh;
      margin: auto;
          padding: 2%;
    }
    
    .test_notes {
      width: 80%;
      height: auto;
      margin: auto;
      padding: 5%;
      background-color: #EFFCFF;
    
    }
    
    .test_notes img {
      width: 50px;
      display:inline-block;
      vertical-align: middle;
    }
    
    .test_notes .title {
      width: 65%;
      text-align: left;
      font-size: 1.6vw;
      padding: 0 5%;
      display:inline-block;
      vertical-align: middle;
    }
    
    .test_notes .ditale {
      text-align: left;
      font-size: 1.2vw;
      margin: 10% 0;
    }
    
    .test_list {
      width: 83%;
      height: auto;
      max-height: 35.5vh;
      margin: auto;
      margin-bottom: 20px;
      background-color: #EFFCFF;
      overflow: scroll;
      overflow-x: hidden;
    }
    .test_list ul {
      border-bottom: 1% solid #376CA3;
    }
    
    .select_test_area li {
      text-align: left;
      padding: 1%;
      border-top: 1px solid #376CA3;
      border-right: 1px solid #376CA3;
      border-left: 1px solid #376CA3;
    }
    .test_list img {
      width: 4vh;
      padding: 0 1%;
      display:inline-block;
      vertical-align: middle;
    }
    
    .test_list .title {
      padding: 0 1%;
      font-size: 1.4vw;
      display:inline-block;
      vertical-align: middle;
      color: #FFF;
    }
    
[/code]


CC BY-SA 4.0
2021-01-15T14:32:16.887
73326
2021-01-15T19:29:02.403
2021-01-15T19:29:02.403
3068
40231
question
html css
CSSにおいてボックスがはみ出る問題を解決したい