Ottergram- when I shrink page, thumbnail list disapears

At the beginning of chapter 4 when I shrink page thumbnail list disappears and no list appears at the bottom.
this happens when I added" display: flex; " to .main-content also font is not showing.My css code is below…HELP!!!:

font-size: 20px;
background: rgb(149,194,175);
display: flex;
flex-direction: column;
height: 100%;
font-family: ‘lakeshore’;
src:url(‘fonts/LAKESHOR-webfont.eot?#iefix’) format(‘embedded-opentype’),
font-weight: normal;
font-style: normal;

background: rgb(96,125,139);
color: rgb(202,238,255);

display: block;
/* box around it takes up 100% of width
of conatiner/li since its a block*/
padding: 1% 2%;

display: inline-block;
min-width: 120px;
max-width: 120px;
border: 1px solid rgb(100%,100%,100%);
border: 1px solid rgba(100%,100%,100%,0.8);
.thumbnail-item + .thumbnail-item{
margin-top: 2%;
text-decoration: none;

width: 100%;
/* below, this got rid of spacing between titles and images in
thumbnail-titles now they are stacked on top of each other*/
display: block;
/* flex-shrink: 0;
flex: 1 0 auto;*/
list-style: none;
padding: 0;
/*to keep list from wrapping
and to add horizontal scrow bar: */
white-space: nowrap;
overflow-x: auto;

flex:0 1 auto;
order: 2;
display: flex;

background: white;
text-align: center;
text-transform: uppercase;
font-size: 90%;
font-family: lakeshore;
width: 90%;

flex: 0 1 auto;
flex: 1 1 auto;

display: flex;

flex-direction: column;

/* will place ul inside it at bottom
because it swaps for main and cross axes*/

flex: 1 1 auto;

I used: " flex: 1 0 auto; " in .thumbnail-list instead.

But now when I zoom in, the white border around the li’s get longer HELP!!!,