列表中的文本与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