<div class="calendar">
<div class="monthYear">February 1987</div>
<ul class="daysOfWeek">
  <li>Sun</li>
  <li>Mon</li>
  <li>Tue</li>
  <li>Wed</li>
  <li>Thu</li>
  <li>Fri</li>
  <li>Sat</li>
</ul>
<ul class="wk">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<ul class="wk">
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
</ul>
<ul class="wk">
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
</ul>
<ul class="wk">
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
</ul>

</div> 
html {
  background: #fc00ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #fc00ff , #00dbde); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #fc00ff , #00dbde); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 100%;
}

body {
  height: 100%;
    margin: 0;
  margin-top: 10px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.calendar {
  
  background: url("https://c1.staticflickr.com/1/398/32709381126_0a0b051d92_b.jpg") center no-repeat ;
 background-size: cover;
  width: 800px;
  margin: 0 auto;
  text-transform: uppercase;
  border: 15px solid black;
}

.monthYear {
  letter-spacing: 25px;
  padding: 10px;
  text-align: center;
  font-family: 'Heebo', sans-serif;
  font-size: 30pt;
   text-shadow: -5px -2px 1px #FF00E0;
}

.daysOfWeek li{
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 14pt;
  padding: 0;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.wk {
  margin: 0;
  height: 80px;
}

.wk li {
  border: 5px solid #C6FFA1;
  padding: 5px;
  font-family: 'Press Start 2P', cursive;
  font-size: 20pt;
}


Rerun