JSFiddle - React, Tailwind, and code Playground

HTML

<header>   
    </header>
    <section id="banner">
            <h1>Test</h1>
    </section>

CSS

body {
    font-family:Arial, Verdana, sans-serif;
    padding:0;
    margin:0;
    background-color:#f4f4f4;
    }

    header {
    background:#333333;
    color:#ffffff;
    height:80px;
    border-bottom:red 5px solid;
    }

    header nav {
    float:right;
    }

    /*issue is here*/
    #banner {
    height:500px;
    text-align:center;
    color:#ffffff;
  /*  border-top:red 5px solid */;/*remove this line and see*/
    border-bottom:red 5px solid;
    background-color:green;
    }

    #banner h1 {
    font-size:50px;
    margin-top: 0;
    }