Inline-Block Elements Not Filling Up The Entire Width Of Div Container Using Width Percentage
Hello, I encountered this issue several weeks ago and decided to put the solution here. This pertains to inline-block elements not occupying the entire width of the container. Each element's width is set using percentage instead of pixels. After doing some research, I found a solution here: Display Inline-Block with Widths as Percent with the solution to set the font-size of the container element to 0 and add style box-sizing to border-box. For the child elements, set the default font size. CSS Code .container { margin : 0 0 1em 0; border : 2px solid black; padding : 1em; font-size : 0; box-sizing: border -box; } nav { vertical-align : top ; display : inline - block ; width : 25%; word-wrap: break-word; background-color : lightgray; font-size : 16px; } .column { vertical-align : top ;