div.article {
  width:calc(100% - 200px);
  margin:10px;
}
div.wrapper {
  display:flex;
  margin: 0 auto;
  width: 70%;
}
div.navigation {
  display: left;
  background-color: #5070ff;
  border:3px solid #6400ff;
  border-radius:20px;
  width:180px;
  text-align:center;
}
ul.pageList {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  overflow:hidden;
  
}
li.barItem {
  padding:0px;
  margin:0;
  border-bottom: 3px solid #6400ff;
  height: 30px;

}
a {
  height:30px;
  width:180px;
  color:white;
  margin:0px;
  padding:0;
  display:block;
}
a:hover {
  background-color: blue;
}
#home {
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  
}
@media (max-width:600px){
  div.wrapper{
    display:block;
    width:100%;
    font-size:20px
    
  }
  div.navigation{
    float:auto;
    width:100%;
    height:auto;
    display:block;
  }
  div.article {
    width:100%;
    
    
  }
  a {
    width:100%;
  }
 
}