body, #wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

.my-div-style {
  margin-top: 6rem;
}



.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
  background: #ffffff;
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 120px;
  font-size: 16px;
  color: #999;
  padding: 0 30px 0 0;
}
.news-list .item .title{
  margin: 0;
  width: 80%;
  max-width: 150px;
  min-width: 100px;
}
.news-list .item .text{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00F;
}
.news-list .item a:hover .text{
  color: #00F;
}


@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}