html - Showing 4 boxes on the same line within a div -

i'm attempting create 'popular products' bar @ bottom of page. here example:

however, i've run problem multiple divs don't appear on same line. i've read different ways of doing including display:inline-block(everywhere says bad idea), display:table-cell(this creating new line still), , using spans display:inline-block(also still creating new line.) i've tried removing 'display' in .productbox class, doesn't show box @ all.

here's code productbox:

.productbox { width: 168px; height:135px; display:inline-block; background-color: #b2b2b2;     } 

how using flex box? here's html & css

.wrapper  {    display: flex;  }    .wrapper div  {    width: 100px;    height: 100px;    background-color: blue;    margin: 10px;  }

<div class="wrapper">    <div>div 1</div>    <div>div 2</div>    <div>div 3</div>    <div>div 4</div>  </div>

note depending on target audience may need vendor prefixes. flex has ton of nice options though, , makes targeting different screen sizes trivial.