.top-bar {
    text-align: center;
}

.img-container {
    width: 100%;      /* or 100% */
    height: 100%;     /* or any fixed height */
    margin: 0 auto;
    display: inline;
    vertical-align: top;
    overflow: hidden;
    float: left;
    clear: both;
    background-color: #bba6c8;
}

.image-cell {
    margin: 1%;
}
.col1 {
    display: inline;
    vertical-align: top;
    float: left;
    width: 49%;        /* a bit less than 50% to leave room for padding */
    margin: 1%;
    margin-right: 0%;
    overflow: hidden;
    border: none;
}
.col2 {
    display: inline;
    vertical-align: top;
    float: left;
    width: 49%;        /* a bit less than 50% to leave room for padding */
    margin: 1%;
    margin-left: 0%;
    overflow: hidden;
    border: none;
}
.image-cell img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.lil-shit {
    clear: both;
    margin-bottom: inherit;
}

.sidebar-left {
    float: left; /* Pushes the element to the left side */
    width: 14%;  /* Defines the required width */
    padding-left: 1.5%; 
}

.sidebar-right {
    float: left; /* Pushes the element to the left side */
    width: 14%;  /* Defines the required width */
    padding-right: 1.5%; 
}


.main-content {
    float: left;
    width: 65%;  /* Defines the required width; used to be 68 */
    height: 100%;
    /* Add a margin-left to create the desired 2% gap from the sidebar */
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    /* old note: 14% + 3% + 4% (gap) + 65% = 86% - leaves 14% remaining space on the right */
}

.container::after {
    content: "";
    display: table;
    clear: both;
    /* old - Set max width to the combined required width (14% + 2% + 70% = 86%) 
    and use margin: auto to center the entire block. */
	  width: 84%; 
    padding: 0 auto;
}