CSS内联元素在达到100％时下降

Question

我将3个内联元素彼此相邻放置，Togther占据了其父级宽度的100％

我试图理解为什么当我希望所有3列加起来完全等于其父级的整个宽度时，.col3（黑色）被放到其父级中的原因。

CodePen

HTML：

    <div class="container">
    <h1 class="header">Brokers View</h1>
    <div class="dataGrid">       

        <div class="grid-header">
            <div>Name</div>
            <div>Rating</div>
            <div>Country</div>                                                         
        </div>

        <div class="broker">

            <div class="col1">broker 1</div>
            <div class="col2">98%</div>
            <div class="col3">GB</div>    
        </div>

        <div class="broker">

            <div class="col1">broker 2</div>
            <div class="col2">96%</div>
            <div class="col3">UK</div>

        </div>

    </div>

</div>

CSS：

*{ 
     box-sizing: border-box;
     margin : 0;
     padding : 0;
     border : 0px;
 }

 body
 {
     background: #92bde7;
     color : #485e74;
     line-height: 1.6;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }


.header{
     text-align: center;
 }

.container{
    max-width: 1170px;
    margin-left: auto;
    margin-right:auto;
    padding: 1em;
 }

.grid-header {
    background : #485e74;    
   color: #fff;
   font-size: 18px;
}

.grid-header > div{
    display: inline-block;
}

.broker{   
    background: red;
}

.broker > div{
   display: inline-block; 
}

.col1 {
   width : 25%;
}

.col2 {
   width : 25%;
}

.col3 {
   width : 50%;    
   background: black;
 }