关于顶部菜单布局的问题

<div class="main">
    <div class="nav">
        <div class="title">首页</div>
        <div class="title">点击查看</div>
        <div class="title">会动的网页</div>
        <div class="title">我的网站</div>
    </div>
</div>

//CSS样式如下
*{
    margin: 0px;
    padding: 0px;
}

.main{
    width: 1200px;
    font-family: "微软雅黑";
    font-size: 22px;
}


.title{
    display: inline-block;
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    list-style: none;

}

为什么main设置了1200px,里面的4个div均分300px,但是这4个div没有办法在一行，最后一个被挤下去了，调试查看也没有任何边框和外边距，这是为什么呢？