Terrycoco/layout.css

## layout.css

body {
    font-family: helvetica, arial, sans-serif;
    margin: 0;
    background: lightgrey;
    font-size:1em;
    position: inherit;
}
div {
    display: block;
}

p, h2, li {
    padding-top: 0;
    margin-left: 2%;
    padding-right: 2%;
}


.containermain {
    position: relative;
    width: 90%;
    margin:0 auto;
    background-color: whitesmoke;
}

    .containerheader {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        height: 100px;
        background-color: whitesmoke;
    }
        .containerheader h1 {
            padding-left: 2%;
            line-height: 1.5em;

        }
        .containerheader nav {
            position: relative;
            width: 98%;
            bottom: 0;
            background-color: lightpink;
            height: 30px;
            line-height: 1.5em;
            padding-left: 2%;
        }

.flexbox-container {

    background: #eee;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    #col1 {
        width: 80%;
        min-height: 200px;
        background: lightgreen;
        padding: 10px;
    }

    #col2 {
        width: 20%;
        padding-left: 2%;
        padding-right: 2%;
        background: mediumpurple;
}

## layout.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Layout Test</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
<div class="containermain">
    <div class="containerheader">
            <h1 class="text">Simple 2 Column CSS Layout, Final Layout</h1>
            <nav class="text">
                <a href="#">Option 1</a>
                <a href="#">Option 1</a>
                <a href="#">Option 1</a>
                <a href="#">Option 1</a>
                <a href="#">Option 1</a>
            </nav>
    </div>
      <div class="flexbox-container">


            <div id="col1">
                <h2>Column 1</h2>
                <p><a id="addr" href="#">456 Berea Street Home</a>
                <p><a href="#">Simple 2 Column CSS Layout, Final Layout</a>
                <p>Lorem ipsum dolor sit amet, ei nostrum instructior his, per repudiare repudiandae in. Fabulas facilisis vim ne, appetere atomorum id est, mazim dicunt mei ex. Per velit sadipscing vituperatoribus ex, ei cum ferri nusquam adversarium. Porro tritani id his. Ne sit viderer platonem, cum populo corpora inimicus te. No labore assueverit definitiones his.
                <p> Et rebum laboramus constituam nec. Vim adhuc simul tractatos an, sed esse deseruisse te. In eum verear conceptam rationibus, usu at scripserit temporibus. Nam id agam erant clita, in vide inermis pro, mei summo numquam an. At docendi quaestio vis, id vix dicta mucius voluptatum, falli impetus noluisse et est. Id vis falli ocurreret iracundia, et eum omnesque reformidans. Maiorum probatus recteque an cum, eam cu adhuc etiam.
                <p>Vix latine intellegebat eu, at graecis mediocrem ullamcorper cum. Quo ornatus noluisse referrentur ut. Impetus intellegebat et usu, sonet fierent adolescens te mea. Eum doctus omittam te, mel bonorum quaestio vulputate ex. Eum argumentum complectitur consequuntur cu, verear definitiones ad eum, ne alterum equidem tacimates has. Harum dolore ut quo, facilis percipit eum eu. Ea labitur habemus pri, sea brute veritus corpora cu.
                <p>Vim at iusto vocibus philosophia, vim an integre accusam. Vis id ferri molestie. Clita dolore omnesque te cum. Scaevola consulatu philosophia eos eu. No deleniti hendrerit eos. Mei sint nullam percipitur te, populo audiam eu vel.
                <p>Pri ad agam docendi ocurreret, explicari contentiones ad pro, elitr feugait qui an. Eu his accumsan persecuti deseruisse, at vis rebum quidam. Ceteros vivendo vulputate nec an, no graecis placerat vituperatoribus qui. Has te choro fabulas facilisi. Reprehendunt conclusionemque ne vel, eu movet nostrud vocibus mei. Duo ut sale omnes iracundia.</p>
            </div>

            <div id="col2"><h2>Column 2</h2>
                <p>Lorem ipsum dolor sit amet, ei nostrum instructior his, per repudiare repudiandae in. Fabulas facilisis vim ne, appetere atomorum id est, mazim dicunt mei ex. Per velit sadipscing vituperatoribus ex, ei cum ferri nusquam adversarium. Porro tritani id his. Ne sit viderer platonem, cum populo corpora inimicus te. No labore assueverit definitiones his.
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                    <li><a href="#">Link 7</a></li>
                    <li><a href="#">Link 8</a></li>
                    <li><a href="#">Link 9</a></li>
                    <li><a href="#">Link 10</a></li>
                    <li><a href="#">Link 11</a></li>
                    <li><a href="#">Link 12</a></li>
                    <li><a href="#">Link 13</a></li>
                    <li><a href="#">Link 14</a></li>
                    <li><a href="#">Link 15</a></li>
                </ul>
            </div>
    </div>

</div>
</body>
</html>

	body {
	font-family: helvetica, arial, sans-serif;
	margin: 0;
	background: lightgrey;
	font-size:1em;
	position: inherit;
	}
	div {
	display: block;
	}

	p, h2, li {
	padding-top: 0;
	margin-left: 2%;
	padding-right: 2%;
	}


	.containermain {
	position: relative;
	width: 90%;
	margin:0 auto;
	background-color: whitesmoke;
	}

	.containerheader {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	height: 100px;
	background-color: whitesmoke;
	}
	.containerheader h1 {
	padding-left: 2%;
	line-height: 1.5em;

	}
	.containerheader nav {
	position: relative;
	width: 98%;
	bottom: 0;
	background-color: lightpink;
	height: 30px;
	line-height: 1.5em;
	padding-left: 2%;
	}

	.flexbox-container {

	background: #eee;

	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}

	#col1 {
	width: 80%;
	min-height: 200px;
	background: lightgreen;
	padding: 10px;
	}

	#col2 {
	width: 20%;
	padding-left: 2%;
	padding-right: 2%;
	background: mediumpurple;
	}
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Layout Test</title>
	<link rel="stylesheet" href="layout.css">
	</head>
	<body>
	<div class="containermain">
	<div class="containerheader">
	<h1 class="text">Simple 2 Column CSS Layout, Final Layout</h1>
	<nav class="text">
	<a href="#">Option 1</a>
	<a href="#">Option 1</a>
	<a href="#">Option 1</a>
	<a href="#">Option 1</a>
	<a href="#">Option 1</a>
	</nav>
	</div>
	<div class="flexbox-container">


	<div id="col1">
	<h2>Column 1</h2>
	<p><a id="addr" href="#">456 Berea Street Home</a>
	<p><a href="#">Simple 2 Column CSS Layout, Final Layout</a>
	<p>Lorem ipsum dolor sit amet, ei nostrum instructior his, per repudiare repudiandae in. Fabulas facilisis vim ne, appetere atomorum id est, mazim dicunt mei ex. Per velit sadipscing vituperatoribus ex, ei cum ferri nusquam adversarium. Porro tritani id his. Ne sit viderer platonem, cum populo corpora inimicus te. No labore assueverit definitiones his.
	<p> Et rebum laboramus constituam nec. Vim adhuc simul tractatos an, sed esse deseruisse te. In eum verear conceptam rationibus, usu at scripserit temporibus. Nam id agam erant clita, in vide inermis pro, mei summo numquam an. At docendi quaestio vis, id vix dicta mucius voluptatum, falli impetus noluisse et est. Id vis falli ocurreret iracundia, et eum omnesque reformidans. Maiorum probatus recteque an cum, eam cu adhuc etiam.
	<p>Vix latine intellegebat eu, at graecis mediocrem ullamcorper cum. Quo ornatus noluisse referrentur ut. Impetus intellegebat et usu, sonet fierent adolescens te mea. Eum doctus omittam te, mel bonorum quaestio vulputate ex. Eum argumentum complectitur consequuntur cu, verear definitiones ad eum, ne alterum equidem tacimates has. Harum dolore ut quo, facilis percipit eum eu. Ea labitur habemus pri, sea brute veritus corpora cu.
	<p>Vim at iusto vocibus philosophia, vim an integre accusam. Vis id ferri molestie. Clita dolore omnesque te cum. Scaevola consulatu philosophia eos eu. No deleniti hendrerit eos. Mei sint nullam percipitur te, populo audiam eu vel.
	<p>Pri ad agam docendi ocurreret, explicari contentiones ad pro, elitr feugait qui an. Eu his accumsan persecuti deseruisse, at vis rebum quidam. Ceteros vivendo vulputate nec an, no graecis placerat vituperatoribus qui. Has te choro fabulas facilisi. Reprehendunt conclusionemque ne vel, eu movet nostrud vocibus mei. Duo ut sale omnes iracundia.</p>
	</div>

	<div id="col2"><h2>Column 2</h2>
	<p>Lorem ipsum dolor sit amet, ei nostrum instructior his, per repudiare repudiandae in. Fabulas facilisis vim ne, appetere atomorum id est, mazim dicunt mei ex. Per velit sadipscing vituperatoribus ex, ei cum ferri nusquam adversarium. Porro tritani id his. Ne sit viderer platonem, cum populo corpora inimicus te. No labore assueverit definitiones his.
	<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
	<li><a href="#">Link 6</a></li>
	<li><a href="#">Link 7</a></li>
	<li><a href="#">Link 8</a></li>
	<li><a href="#">Link 9</a></li>
	<li><a href="#">Link 10</a></li>
	<li><a href="#">Link 11</a></li>
	<li><a href="#">Link 12</a></li>
	<li><a href="#">Link 13</a></li>
	<li><a href="#">Link 14</a></li>
	<li><a href="#">Link 15</a></li>
	</ul>
	</div>
	</div>

	</div>
	</body>
	</html>