Inline-block are not aligned and I don't know why

Hi everybody,

I’m trying to get 3 elements aligned using inline-block. They moved from initial position but are not in a line… Can somebody explain to me why and how to fix it?

Thanks a lot and happy coding!

Hi, I’m not sure if this is correct, but perhaps worth a try, as I had a similar issue when doing the exercise in the CSS section, exercise, Broadway.

I had to play around with the heights and widths of the element you are applying the declaration “display: inline-block” AND the heights and widths of the children elements.

In a problem such as this one might just as well toss it, and start with a fresh slate.

We want three equal size containers side by side over the width of the viewport:

.parent {
    position: relative;
    width: 100%;
.parent li {
    display: inline-block;
    width: 31%;
    height: 6em;
    overflow: hide;
    border: double 3px black;

If you have a sandbox where we can collaborate on this, share away.