CSS Responsive design problems - html

Question

Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here:
Here are the major issues that are keeping me from completing it. The most important is the 1st issue. It is really driving me crazy!!!
Below 490px and above 320px window size there are 3 element's whose width shrinks more than the other elements that are full width. You can see that the header-left and header-right elements (which are stacked in mobile size), and the footer element all shrink more than the rest of the page causing the right side of the page to be out of line. Something is keeping the elements from collapsing evenly.
Also I have positioned the footer absolutely at the bottom of the page but I also moved it up 100px so that it slides up under the text above. But this leaves a gap at the bottom of the page. Is there any way to close up this gap?
Thank you very much for any help that you can give me.
Pete
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html,
body,
p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
#media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main,
aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
#media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/> Excepteur sint occaecat cupidatat<br/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class="center-table">
<!-- CENTER ROW -->
<div class="center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
<li>
<span>John Jacob</span>
<br/> Expert in Stuff
<br/> Lorum ipsum Division
<br/> Department of Lorem Ipsum
<br/> 200 Car Talk Tower, Dewey Cheatum & Howe
<br/> Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
<br/> XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>

Answer 1

This should fix issue #1 :
.container {
width: fit-content;
}