Level2 - 3 animate 와 div박스 질문있습니다.

<button id="modal-button" class="btn btn-danger"> Click </button>
 
<div class="modal-container" id="modal-contain">
<div class="modal-main" id="modal-m">모달 창</div>
</div>

<script>

$('#modal-button').on('click', function(){
$('#modal-contain').animate({marginTop:"0px"}, 4000)
})

</script>

제가 만든 코드는 이렇습니다.

볼드체로 표시한 부분에 #modal-contain이라고 쓰면 animate가 작동하지 않고,

container의 하위 div박스의 id명인 #modal-m으로 써야 잘 작동합니다.

왜 상위요소가 아닌 하위요소의 아이디를 선택할 때만 animate가 가능한 걸까요?

ps. animate 뿐만 아닌 margin을 정할 때도 이런 문제가 몇 번 있었습니다. 

"자바스크립트는 원래 그렇게 작동한다"라고 생각하면 되는 걸까요? 

아니면 제 HTML 설계가 잘못된 걸까요?