A Demo Web-Site

Flex navigation

Today is 08-12-2021
My Social media
.top-row {
display:flex;
justify-content:space-between;
border:solid 0px #444; }

.top-row > div {
flex:1;
border:solid 1px #444; }

.top-row > div:nth-child(1){
text-align:left;
flex:1;
padding-top:0.5em;
background:yellow;
}

.top-row > div:nth-child(2){
text-align:center;
flex:2;
}

.navigation-container ul li {
list-style:none;
display:inline-flex;
}

ul li a {
width:130px;
text-decoration: none;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
transition: background 0.4s ease-in-out;
transition: all 0.3s ease-in-out;
}

.top-row > div:nth-child(3){
text-align:right;
float:right;
padding-top:0.5em;
background:red;
}