列表中的文本與LESS和圖層優化的對齊方式

我需要您的專業幫助與我的代碼！我開始學習網絡開發，現在我的項目遇到了麻煩。列表中的文本與LESS和圖層優化的對齊方式

我不明白如何使用網頁上的圖層。如果我想製作自適應網站，我的圖層在重新調整瀏覽器窗口期間重疊。如何讓我的Pin更適應適當的形式？

如何在菜單上的列表中的對齊對象（在我的代碼 - > div-user;帶數字的圓圈）（LINK TO PIN）？

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 

 
@green: #2ECC71; 
 
@white: #E4F1FE; 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: @green; 
 
} 
 

 
.user { 
 
    margin: 0; 
 
    position: absolute; 
 
    display: flex; 
 
    width: auto; 
 
    top: 5%; 
 
    left: 10%; 
 
    .name { 
 
    position: relative; 
 
    display: flex; 
 
    left: 25px; 
 
    top: 25px; 
 
    color: @white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    } 
 
    ul { 
 
    margin: 0; 
 
    position: relative; 
 
    display: flex; 
 
    left: 10px; 
 
    align-items: center; 
 
    } 
 
    li { 
 
    position: relative; 
 
    list-style: none; 
 
    display: inline; 
 
    justify-content: center; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    margin: 0px 15px 0px 0px; 
 
    background-color: darken(@green, 2%); 
 
    } 
 
} 
 

 
.avatar { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
} 
 

 
.menu { 
 
    position: relative; 
 
    top: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0; 
 
    li { 
 
    list-style: none; 
 
    } 
 
    a { 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-decoration: none; 
 
    width: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 15px 15px 15px 15px; 
 
    background-color: darken(@green, 2%); 
 
    border-radius: 100px; 
 
    margin: 0px 5px 0px 5px; 
 
    color: @white; 
 
    &:hover { 
 
     background-color: lighten(@green, 10%); 
 
     border-bottom: 2px solid lighten(@green, 25%); 
 
    } 
 
    &:active { 
 
     border-bottom: 2px solid lighten(@green, 25%); 
 
    } 
 
    } 
 
}

<html> 
 
    <body> 
 
    <div class="header"> 
 
     <div class="user"> 
 
     <img class="avatar" 
 
      src="http://lorempixel.com/200/200/cats/"> 
 
     <p class="user name">UserName</p> 
 
     <ul> 
 
      <li>1</li> 
 
      <li>2</li> 
 
     </ul> 
 
     </div> 
 
     <ul class="menu"> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Media</a></li> 
 
     </ul> 
 
     
 
    </div>

來源

2016-08-17 salamanrMan