html inline-block 공백처리

<div class="container">

        <div class="item">one</div><div class="item">two</div>

    </div>

 

의 스타일을 입히면

.container{

            width:1000px;

            height: 500px;

            border:1px solid red;

            font-size:0;

            letter-spacing:0;

            word-spacing:0;

            line-height:0;

        }

        .item{

            width:50%;

            height: 500px;

            border:1px solid black;

            display: inline-block;

            /* margin-right:-5px; */

            margin: 0px;

            padding: 0px;

            font-size:5px;

        }

 

와 안맞아... 왜지??

인터넷에 있는 방법들을 써봐도 해결 되지 않아서

결국 flex 또는 fload:left로 처리했습니다