style.css

.nav {
  display: flex;
  height: 50px;
  justify-content: flex-end;
}

.left {
  background: #ffcdd2;
  border: 2px solid red;
}

.middle {
  background: #bbdefb;
  border: 2px solid red;
}

.right {
  background: #fff9c4;
  border: 2px solid red;
  
}

.search-bar{
  display: flex;
  justify-content: center;
}

.search-section{
  display: flex;
  justify-content: center;
}

.logo{
  display: flex;
  justify-content: center;
}

.pub{
  display: flex;
  justify-content: center;
  
}

.main-footer{
  background-color: darkgrey;
}

.footer-up ul{
  list-style: none;
  display: flex;
}

.footer-down ul{
  list-style-type: none;
  display: flex;
}

.footer-up{
  margin-left: 2px;
  width: 100%;
  margin: 0 auto;
  position: sticky;
  top: 0px;
  display: flex;
  justify-content: left;
}

.footer-down{
  margin-left: 2px;
  width: 100%;
  margin: 0 auto;
  position: sticky;
  top: 0px;
  display: flex;
}

.footer-up ul li{
  flex: 1 1 auto;
  text-align: center;
  position: relative;
}

.footer-down ul li{
  flex: 1 1 auto;
  text-align: center;
  position: relative;
}

.footer-up a{
  display: flex;
  text-decoration: none;
  color: black;
  padding: 2px 0px;
}

.footer-down a{
  display: flex;
  text-decoration: none;
  color: black;
  padding: 2px 0px;
}

.sous{
  display: none;
  background-color: rgb(203, 203, 203);
  position: absolute;
  width: 100%;
}

.footer-down > ul li:hover .sous{
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
}
.sous li{
  flex: 1 1 auto;
}

.sous a{
  padding: 3px;
  display: flex;
  justify-content: left;
  flex-wrap: nowrap
}

.neutral{
  display: flex;
  justify-content: center;
}