I need css code to divide my webpage sections into two columns

First, move your headings into their sections, so your structure looks more like this:

<main>
   <section>
      Heading Here
      Cards Here
   </section>
   <section>
      Heading Here
      Cards Here
   </section>
</main>

Then you can do this in a few different ways with CSS. The simplest way is to add a class to each section and then float the first one left with a right margin of 1%, float the second one to the right with a left margin of 1%, and give them a width of 48% each. This will ensure they are 2 columns at all times.

If you’re using more modern techniques, have an autoprefixer installed (or are familiar with writing compatibility for css), and are looking for a responsive solution, I would use flexbox. Here’s how I would do this in SCSS.

.main {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;

    @media only screen and (min-width: 600px) {
        flex-wrap: nowrap;
    }

    section {
        width: calc(100% - 30px);
        margin: 15px;

        @media only screen and (min-width: 600px) {
        width: calc(100% / 2 - 30px);
        }
    }
}

tech