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

Language Help CSS
,
1

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!

printscreen
printscreen937×573 69.6 KB

2

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.

3

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.