* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container, main{
/* För att styra hur många element som får plats på varje rad så kan vi använda flexbox med wrap.
   När det inte får plats mer på en rad så fortsätter innehållet på nästa rad.
  Så både container och main ska vara flexbox och tillåta wrap.*/
  flex-wrap: wrap;
  font-size: xx-large;
  display: flex;
}

main{width: 100%;}

.box {
/* Det är många olika sorters element som ska ha samma inställningar. Alla får klassen box 
   Bredden är 100% och höjden 300px. 
   Det ska vara flexbox med centrerat innehåll.
   En vit kantlinje. */
   width: 100%;
   height: 300px;
   display: flex;
   justify-content: center;
   text-align: center;
   border: 1px solid white;
   flex-wrap: wrap;
   align-content: center;
}

.logo, footer{
  background-color: #3388FF;
}

nav.box{  /* OBS inget mellanslag betyder att selektorn hittar element som har BÅDE nav och klassen .box*/
    background-color: #FF8833;
    /* fyll på lämnplig css här */
}

nav a{
/* Ursprungliga inställningen här ska vara för mobil-läge!
  Så det ska få plats två a-taggar bredvid varandra på en rad.
  Höjden är 100px.
  Centrera texten och gör länktexten svart utan någon linje under. */
  height: 100px;
  width: 50%;
}

.ads, .ads-side{background-color: #FFDD00;}

.ads-side{
  display: none;   /* I mobil-läge så syns inte reklamen på sidan. */
  width: 25%;
  height: 600px;
  
 /*Se till att texten centreras. */
}

.news-1{background-color: #88DD88;}
.news-2{background-color: #66EE99;}
.news-3{  background-color: #99EE66;}
.news-4{  background-color: #77FF77;}


@media only screen and (min-width: 600px)
{

  nav a {width: 25%;}
 .news-1 { order: 1; width: 50%; }
  .news-2 { order: 2; width: 50%; }
  .ads    { order: 3; width: 100%; }
  .news-3 { order: 4; width: 50%; }
  .news-4 { order: 5; width: 50%; }
 

}
@media only screen and (min-width: 1200px)
{
.ads {display: none;}
.ads-side{
display: flex;
justify-content: center;
align-items: center;
}
main {width: 75%;}
nav a {width: 25%;}
 

}