HTML/CSS定位使导航栏浮动到右下角

我正试图让导航栏在容器的底部浮动

导航栏现在定位底部，但它不定位在容器（.wrapper）代码中，所以现在的问题是，如何使它正确定位在包装中

style.css中的站点标题代码：

.site-head {position: relative; display: table; width: 100%; padding-top: 50px; background: #203041 no-repeat center center; background-size: cover;}

.wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }

a {color: #FFFFFF; text-decoration: none; font-weight: bold; }
a:hover {color: #cc3727;}
header {background: #fff; width: 100%; height: 180px; position: fixed; top: 0; left: 0; z-index: 100; background: #203041 no-repeat center center; background-size: cover;}
nav {poistion: absolute; right: 0; bottom: 0; float: right;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #4C8FEC url(images/menu-icon.png) center;} 
a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0;}  
ul { list-style: none; padding: 0; } 
li {display: block;float: left;padding: 10px; font-family: 'Proxima Nova Light', 'Open Sans', sans-serif; color: #FFFFFF;}
.active {color: #cc3727;}

style.css中的容器代码：

.site-head {position: relative; display: table; width: 100%; padding-top: 50px; background: #203041 no-repeat center center; background-size: cover;}

.wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }

a {color: #FFFFFF; text-decoration: none; font-weight: bold; }
a:hover {color: #cc3727;}
header {background: #fff; width: 100%; height: 180px; position: fixed; top: 0; left: 0; z-index: 100; background: #203041 no-repeat center center; background-size: cover;}
nav {poistion: absolute; right: 0; bottom: 0; float: right;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #4C8FEC url(images/menu-icon.png) center;} 
a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0;}  
ul { list-style: none; padding: 0; } 
li {display: block;float: left;padding: 10px; font-family: 'Proxima Nova Light', 'Open Sans', sans-serif; color: #FFFFFF;}
.active {color: #cc3727;}

style.css中的导航条形码：

.site-head {position: relative; display: table; width: 100%; padding-top: 50px; background: #203041 no-repeat center center; background-size: cover;}

.wrapper { width: 100%; max-width: 1240px; margin: 0 auto; }

a {color: #FFFFFF; text-decoration: none; font-weight: bold; }
a:hover {color: #cc3727;}
header {background: #fff; width: 100%; height: 180px; position: fixed; top: 0; left: 0; z-index: 100; background: #203041 no-repeat center center; background-size: cover;}
nav {poistion: absolute; right: 0; bottom: 0; float: right;}
#menu-icon {display: hidden; width: 40px; height: 40px; background: #4C8FEC url(images/menu-icon.png) center;} 
a:hover#menu-icon { background-color: #444; border-radius: 4px 4px 0 0;}  
ul { list-style: none; padding: 0; } 
li {display: block;float: left;padding: 10px; font-family: 'Proxima Nova Light', 'Open Sans', sans-serif; color: #FFFFFF;}
.active {color: #cc3727;}

使用的HTML：

    <header class="site-head">
    <div class="cf wrapper">
    <div class="logo">
      <span class="site-logo">Logo</span>
    </div>
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a href="#">Home</a></li>
            <li>|</li>
            <li><a href="#" class="active">Music</a></li>
            <li>|</li>
            <li><a href="#">Videos</a></li>
            <li>|</li>                
            <li><a href="#">Social</a></li>
            <li>|</li>                
            <li><a href="#">Bio</a></li>             
        </ul>
    </nav>
    </div>
</header>

标志


|

|

|

|

我没有运气浏览了几个stackoverflow线程。我对制作网站相当陌生

下面是一个JSFIDLE：

编辑：@Amit通过校对解决了问题

---

编辑编辑：导航栏现在位于底部，但它不在容器（.wrapper）代码中，所以现在的问题是，如何使它在包装中正确定位？

使用正确的拼写帮助。JSFIDLE会在错误时提示您，但您需要保持整洁，并注意红色语法高亮显示

泊松！=职位

nav {position: absolute; right: 0; bottom: 0; float: right;}

---

工作

谢谢，它现在位于右下角，但是它似乎没有在容器（.wrapper）中执行此操作，您知道如何解决此问题吗？这取决于您正试图实现的目标。有几件事影响了这一点（特别是，

位置：绝对值

）我在这里创建了一个屏幕截图：正如你可以看到的那样，导航栏的位置在概述的包装外，我正试图使其位于“框”内。我想说的是，有不止一种方式（可能超过5种）为了实现这一目标，要改变你目前的结构，“正确的结构”取决于几个因素，比如反应能力。从删除绝对定位开始，玩CSS，当你“接近”你需要的东西时，把它作为一个新问题发布（当然，除非你自己能做到）