.tabsNavigation { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .tabsNavigation .tabsItem { background-color: #F0F0F0; color: #1E1E1E; padding: 0.5rem; text-align: center; margin-top: .05rem } .tabsNavigation .tabsItem.active { color: #585858; font-weight: 700; border-bottom: .15rem solid #007DBA } @media only screen and (min-width:1600px) { .tabsNavigation { width: auto; padding: 0 5rem; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; background-color: #F0F0F0; justify-content:space-between; } .tabsNavigation .tab-1 { position:relative; width:35%; left:206px; } .tabsNavigation .tab-2 { position: relative; width:35%; right:206px; } } @media only screen and (min-width:747px) and (max-width:1649px) { .tabsNavigation { width: auto; padding: 0 5rem; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; background-color: #F0F0F0; justify-content: space-between; } .tabsNavigation .tab-1 { position:relative; flex:1; left:-65px; } .tabsNavigation .tab-2 { position:relative; flex:1; right:-65px; } }