the section under OUR SERVICES is column wise , i cant get it in a row can someone see and fix it please

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Hungryyy.com</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@1,700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,700;1,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Volkhov:ital,wght@0,700;1,700&display=swap" rel="stylesheet"> <style> /* CSS RESET? */ * { background-color:rgba(17, 15, 15, 0.329)8, 72, 72); margin: 0px; padding: 0px; font-family: 'Volkhov', serif; } .list { border-radius: 300px; height: 80px; margin-top: 19px; background-color: #3e383852; width: 100%; } .logo img { width: 190px; margin: -20px; padding: 10px; } #navbar { font-family: 'Volkhov', serif; display: flex; position: relative; list-style: none; height: 150px; } #navbar::before { content: ""; background-color: black; position: absolute; height: 100%; width: 100%; z-index: -1; } .list li a { text-decoration: none; justify-c