Need help with html and css layout

[lukashb]

I am creating a page about my hobby, and have text that takes up 40% of my width on the left. I want to have 3 or 4 images on the right of the text. I am struggling to figure out how. The pictures are 4032 x 3024.

I am quite new to html and github, so please be helpful

The css is under /Hobbyer/ https://jsfiddle.net/e6h4tw8p/ The image is Figma Imagehow i want it to look, but i want 3 or 4 images on the side not two. The images on the bottom i have

/*Navigation bars*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(-135deg, #040614, #EFE6DD);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

#active:checked~.wrapper {
  clip-path: circle(75%);
}

.menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #EFE6DD;
  cursor: pointer;
  background: linear-gradient(-135deg, #040614, #EFE6DD);
  transition: all 0.3s ease-in-out;
}

#active:checked~.menu-btn {
  background: #EFE6DD;
  color: #040614;
}

#active:checked~.menu-btn i:before {
  content: "\f00d";
}

.wrapper ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}

.wrapper ul li {
  margin: 15px 0;
}

.wrapper ul li a {
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #EFE6DD;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
}

.wrapper ul li a:after {
  position: absolute;
  content: "";
  background: #EFE6DD;
  width: 100%;
  height: 50px;
  left: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}

.wrapper ul li a:hover:after {
  transform: scaleY(1);
}

.wrapper ul li a:hover {
  color: #040614;
}

input[type="checkbox"] {
  display: none;
}

.content {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #040614;
}

.content .title {
  font-size: 40px;
  font-weight: 700;
}

.content p {
  font-size: 35px;
  font-weight: 600;
}











/*Name shine*/
#name_shine {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 15vw;
  /*font-size: 25vw;*/
  letter-spacing: 4px;
  /*letter-spacing: 8px;*/
  overflow: hidden;
  background: linear-gradient(90deg, #040614, #7fb6d5, #040614);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  /*animation: animate 5s linear infinite;*/
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  z-index: 0;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }

  100% {
    background-position: 500%;
  }
}










/*Hobbyer*/
.hobby_names {
  color: white;
}

body {
  background-color: #040614;
  background-size: cover;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #EFE6DD;
}

.fotball_tekst {
  width: 40%;
  padding-left: 20px;
  padding-top: 50px;
  border: 10px;
}

div.scroll-container {
  background-color: #040614;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  position: relative;
  top: 200px;
  width: 100%;
}

div.scroll-container img {
  padding: 10px;
}









/*Kommune*/
.kommune_div {
  color: white;
  padding: 20px;
  position: absolute;
  top: -310px;
  text-align: left;
  width: 50%;
}

.kommune_navn {
  text-decoration: underline;
}

#kommune_txt {
  font-size: small;
}

.kommune_bilder {
  width: 200px;
  height: 150px;
}

/* Existing CSS */

/* New CSS */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two columns of equal width */
}

.kommune_div {
    grid-column: 1; /* Places the text in the first column */
border: solid;
border-radius: 40px;
margin-left: 50px;
}

.kommune_bilder {
    grid-column: 3; /* Places the images in the second column */
    width: 400px;
    margin-right: 120px;
    position: relative;
    top: -275px;
    z-index: -1000;
}

.kommune_bilder img {
    width: 100%;
    height: auto;
    object-fit: cover;
}






/*Photoshop*/
.ps_compare{
  width: 100%;
  height: 100%;
}

.ps_compare_img{
  width: 30%;
}

.img_2{
  height: 525px;
}

<!DOCTYPE html>
<html lang="no">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hobbyer</title>
    <link rel="stylesheet" href="../CSS/style.css" />
  </head>
  <body>
    <input type="checkbox" id="active" />
    <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
    <div class="wrapper">
      <ul>
        <li><a href="index.html">Hjem</a></li>
        <li><a href="om_meg.html">Om Meg</a></li>
        <li><a href="hobbyer.html">Hobbyer</a></li>
        <li><a href="kommune.html">Kommune</a></li>
        <li><a href="photoshop.html">Photoshop</a></li>
      </ul>
    </div>
    <div class="content"></div>
    <div class="fotball_tekst">
      <h1>Fotball</h1>
      <p>
        Fotball har alltid vært en lidenskap i livet mitt, og det er en hobby
        som går i arv i familien. Fra jeg var liten har jeg sett opp til en
        spiller som har fanget min oppmerksomhet på en spesiell måte - Paul
        Scholes. Som en undervurdert fotballspiller har han alltid representert
        det jeg beundrer med sporten. Hans dedikasjon, presisjon og tekniske
        ferdigheter på banen har gjort ham til en legende i Manchester United,
        klubben jeg har elsket siden barndommen.<br /><br />
        Å være en del av den røde hæren har vært en naturlig følge av oppveksten
        min. Pappa, broren min, bestefar og onkel - alle har de heiet på
        Manchester United. Fra de første gangene jeg satt sammen med dem foran
        TV-en for å se kampene, til de følelsesladede diskusjonene etterpå, har
        klubben vært en viktig del av vårt fellesskap.<br /><br />
        Selv har jeg også hatt gleden av å spille fotball. Akkurat nå er jeg
        stolt av å representere Mysen IF, men reisen startet hos Hærland IL.
        Gjennom årene har jeg utviklet mine egne ferdigheter, og fotballen har
        vært et univers der jeg har kunnet uttrykke meg selv og utfordre meg
        selv på mange måter. Å spille fotball har ikke bare gitt meg god trening
        og en sunn livsstil, det har også lært meg verdien av lagarbeid,
        disiplin og utholdenhet.<br /><br />
        Hva som gjør fotballen så spesiell for meg, er imidlertid en gåte.
        Kanskje er det spenningen og adrenalinet som fyller meg når jeg ser på
        kamper, eller kanskje er det den emosjonelle berg-og-dalbanen som følger
        med. Uansett årsak, er det noe unikt ved fotballens evne til å samle
        mennesker, skape fellesskap og formidle lidenskap.<br /><br />
        På banen trives jeg best som defensiv midtbanespiller. Denne posisjonen
        krever teknisk dyktighet og evnen til å lese spillet på en intelligent
        måte. Jeg elsker utfordringen det gir og følelsen av å kunne kontrollere
        spillet fra midtbanen. Som defensiv midtbane blir jeg en dirigent, en
        spiller som kan påvirke kampens utfall ved å være en solid beskytter for
        forsvaret og en kreativ distributør av ballen.<br /><br />
        Blant mine mange fotballopplevelser er det en spesiell kamp som skiller
        seg ut - Manchester United mot Crystal Palace tidligere i høst. Selv om
        United tapte den kampen, var det en uforglemmelig opplevelse for meg. Å
        være tilstede på Old Trafford, omgitt av tusenvis av lidenskapelige
        fans, ga meg en følelse av fellesskap og tilhørighet. Denne kampen
        minnet meg om hvorfor fotball er så mye mer enn bare et spill - det er
        en kultur, en lidenskap og en opplevelse som bringer mennesker
        sammen.<br /><br />
        Fotball vil alltid være en av mine største hobbyer. Det har formet meg
        som person, lært meg verdien av hardt arbeid og samarbeid, og gitt meg
        uforglemmelige opplevelser og minner. Gjennom fotballen har jeg funnet
        en kilde til glede, motivasjon og kontinuerlig utvikling. Enten det er
        på banen eller foran TV-skjermen, er fotballen en del av mitt DNA, og
        jeg ser frem til mange flere fantastiske øyeblikk og eventyr i denne
        fantastiske sporten.
      </p>
      <br /><br />
    </div>
    <div class="scroll-container">
      <img
        src="../Bilder/Lukas/fotball_1.jpg"
        alt=""
        width="600"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_2.jpg"
        alt=""
        width="600"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_3.jpg"
        alt=""
        width="600"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_4.jpg"
        alt=""
        width="600"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_5.jpg"
        alt=""
        width="500"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_6.jpg"
        alt=""
        width="600"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_7.jpg"
        alt=""
        width="700"
        height="400"
      />
      <img
        src="../Bilder/Lukas/fotball_8.jpg"
        alt=""
        width="600"
        height="400"
      />
    </div>
  </body>
</html>

[JhefAraujo]

Add display: flex to your image container