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!!!:

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

.thumbnail-title{
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*/
margin:0;
padding: 1% 2%;

}
.thumbnail-item{
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%;
}
a[href="#"]{
text-decoration: none;

}
.thumbnail-image{
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;*/
}
.thumbnail-list{
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;

}
.logo-text{
background: white;
text-align: center;
text-transform: uppercase;
font-size: 90%;
font-family: lakeshore;
}
.detail-image{
width: 90%;

}
.main-header{
flex: 0 1 auto;
}
.main-content{
flex: 1 1 auto;

display: flex;

flex-direction: column;

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

}
.detail-container{
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!!!,