How can we align 4 columns using CSS?

edit

To align 4 columns using CSS, you can use the CSS Grid layout system. Here is an example of how to create 4 columns and align them:

HTML:

<div class="container">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
  <div class="item">Column 3</div>
  <div class="item">Column 4</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #eee;
  padding: 20px;
  text-align: center;
}

In this example, we first create a container element that uses the grid display property. Then, we set the grid-template-columns to repeat 4 times, with 1 column fraction each (1fr). This creates 4 equal-width columns. We also set a grid-gap of 20px to create some spacing between the columns.

Next, we style the individual items within the container. In this example, we give them a gray background color, 20px of padding, and center the text with text-align:center. This will create 4 aligned columns within the container.