Переход не работает на какое-либо имущество?

Question

Я пытаюсь перейти на кнопку, чтобы двигаться слегка влево плавно, я могу заставить кнопку перемещаться с помощью padding-right, поэтому это не проблема синтаксиса. Переход просто не работает вообще, для любого свойства, которое я использую.

код, который не работает:

#home:hover 
{ 
    padding-right: 10px; 

    transition: padding-right 0.3s ease; 
} 

CSS:

/****Font Faces****/ 
@font-face { 
    font-family: 'bebas book'; 
    src: local('?'), 
     url('../fonts/bebas book.woff') format('woff'); 
} 

@font-face { 
    font-family: 'bebas light'; 
    src: local('?'), 
     url('../fonts/bebas light.woff') format('woff'); 
} 

@font-face { 
    font-family: 'bebas regular'; 
    src: local('?'), 
     url('../fonts/bebas regular.woff') format('woff'); 
} 


/****Hover Modifiers****/ 
header:hover #home, header:hover #portfolio, 
header:hover #about, header:hover #contact 
{ 
    opacity: 1; 

    transition: opacity 0.3s ease; 
} 

header:hover #menuIcon { 
    margin: 20px 50px; 

    transition: margin 0.3s ease; 
} 

header:hover { 
    width: 120px; 

    transition: width 0.3s ease; 
} 

#home:hover 
{ 
    padding-right: 10px; 

    transition: padding-right 0.3s ease; 
} 


/****Page Modifiers****/ 
body { 
    margin: 0; padding: 0; 
} 


/****Header Modifiers****/ 
header { 
    margin: 0; padding: 0; 
    height: 100vh; width: 60px; 

    position: fixed; 

    opacity: 0.85; 

    background: #120C08; 

    transition: width 0.3s ease; 
} 

#menuIcon { 
    margin: 20px; 

    transition: margin 0.3s ease; 
} 

#home, #portfolio, 
#about, #contact 
{ 
    right: 10px; 

    position: absolute; 

    opacity: 0; 

    text-decoration: none; 

    color: #FAECD4; 

    font-family: bebas book; 
    font-size: 25px; 

    transition: opacity 0.3s ease; 
} 

#home {top: 80px;} #portfolio {top: 120px;} 
#about {top: 160px;} #contact {top: 200px;} 


/****Body Content****/ 
#mainImgWrapper { 
    height: 100vh; width: 100%; 

    background: url("../images/mainImage.jpg") no-repeat center center fixed; 
} 

Answer 1

добавить этот

#home { 
    padding-right: 0px; 
    transition: opacity 0.3s ease, padding-right 0.3s ease !important; 
} 

... 

#home:hover { 
    padding-right: 10px; 
}