'Issues centring the a div

I'm trying to centre a div but for some reason the div doesn't get centred. The code is avaialble here.

In the image below you can see which is the issue. enter image description here

htmlcss


Solution 1:[1]

You should not use same ID for elements, use classes instead.

Anyways the problem is that your flex items are not the same size.

set them to same width:

width: calc(100% / 3);

Solution 2:[2]

It is aligned to the center, its just that some of the "#featuresBoxes" divs are bigger than the other. The easy fix is to change the #featuresBoxes css as following:

#featuresBoxes {
  font-family: "Raleway", sans-serif;
  color: white;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Medda86
Solution 2 Spekbillen

Related Questions