Как перемещать элементы Div немного слева

Question

Я хотел бы немного перемещать элементы #wctopdropcont влево. Я попытался применить значения для поля и заполнения, но он просто не работает. Я бы идеально хотел, чтобы текст был 20 пикселей слева. URL-адрес моего блога выглядит следующим образом: http://www.blankesque.com и ниже. Я включил html и css-кодирование всей зависающей навигационной панели.

#wctopdropcont{ /* width of the main bar categories */ 
width:100%; 
height:45px; 
display:block; 
padding: 5.5px 0 0 0; 
z-index:100; 
top:0px; 
left: 0px; 
position:fixed; 

background:#f8f8f8; 
    } 

#wctopdropnav{ /* social */ 
float: right; 
width:97%; 
height:7px; 
display:block; 
padding:0px; 
} 
#wctopdropnav ul{ 
float:right; 
margin:0; 
padding:0; 

} 
#wctopdropnav li{ 
float:left; 
list-style:none; 
line-height:13px; 
margin-left: 4px; 
padding: 10px 6.5px 6.5px 6.5px;/* height of the clicked bar */ 
background:#f8f8f8; 
} 
#wctopdropnav li a, #wctopdropnav li a:link{ 
color:#000000; 
float: right; 
display:block; 
margin-left: 4px; 
text-transform: uppercase; 
font-size: 9.5px!important; 
font-family: karla, arial!important; 
padding: 5px; 
text-decoration:none; 
font-weight: normal!important; 
letter-spacing : 0.09em; 
} 

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a { 
color:black; 
font-weight: normal; 
padding: 5px; 
background: #f8f8f8; /* Old browsers */ 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
filter:black; 
} 
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{ 
font-size: 9.5px; 
background:#f8f8f8; 
color: #000000; 
width: 90px; 
margin: 0px; 
padding: 0; 
line-height: 15px; 
position: relative; 
} 

#wctopdropnav li li a:hover, #wctopdropnav li li a:active { 
color: black; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
background: #f8f8f8; 
filter: #f8f8f8; 
} 
#wctopdropnav li ul{ 
z-index:9999; 
position:absolute; 
left:-999em; 
height:auto; 
width:170px; 
margin:22px 0 0 0; 
padding: 8px 0 0 0; 
} 

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{ 
left:auto 
} 

#wctopdropnav li:hover, #wctopdropnav li.sfhover{ 
position:static 
} 
</style> 
<div id='wctopdropcont'> 
<div id='wctopdropnav'> 
<ul> 

<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li> 


<li><a href='#'>Categories</a> 

     <ul> 
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li> 
       <li><a href='http://www.blankesque.com/search/label/Blogging'>Blogging</a></li> 
      <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li> 
       <li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li> 
      <li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li> 
       <li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li> 
      <li><a href='http://www.blankesque.com/search/label/Skin &amp; Hair'>Skin &amp; Hair</a></li> 
     </ul> 
     </li> 
     <li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li> 

    <li><a href='http://www.blankesque.com/p/discalimer-policy_13.html'>Policies</a></li> 
    </ul> 

    </div></div> 

Answer 1

В вас #wctopdropnav ul у вас есть margin: 0 так что если вы хотите, чтобы переопределить и добавить margin-right: 20px;, то он должен быть объявлен после него, как это.

#wctopdropnav ul { 
    float: right; 
    margin: 0; 
    margin-right: 20px; 
} 

Answer 2

#wctopdropnav ul { 
    ... 
    margin-right: 20px; 
} 

Demo

Answer 3

Мне удалось сдвинуть навигационный текст слева, применив правый край к #wctopdropnav.

#wctopdropnav { 
    float: right; 
    width: 97%; 
    height: 7px; 
    display: block; 
    padding: 0px; 
    margin-right: 20px; 
}