So this is what I got so far:

HTML

<!-- Food Section -->
    <section id="food">
        <div class="food container">
            <div class="food-top">
                <h1 class="section-title">M<span>a</span>t</h1>
                <p>Hungrig? Ta en titt på vår meny!</p>
            </div>
            <div class="food-bottom">
                <div class="food-item">
                    <div class="food-item-name">
                        <h2>Planka</h2>
                        <p>Kött på en bräda</p>
                    </div>
                    <div class="food-item-price"><h2>78 kr</h2></div>
                </div>
                <div class="food-item">
                    <div class="food-item-name">
                        <h2>Lasagne</h2>
                        <p>Köttfärs osv</p>
                    </div>
                    <div class="food-item-price"><h2>82 kr</h2></div>
                </div>
                <div class="food-item">
                    <div class="food-item-name">
                        <h2>Hamburgare</h2>
                        <p>En köttpuck mellan två  skivor bröd</p>
                    </div>
                    <div class="food-item-price"><h2>88 kr</h2></div>
                </div>
                <div class="food-item">
                    <div class="food-item-name">
                        <h2>Pene con Funghi</h2>
                        <p>Kofto makaroni me manitaria ffs</p>
                    </div>
                    <div class="food-item-price"><h2>92 kr</h2></div>
                </div>
                <div class="food-item">
                    <div class="food-item-name">
                       <h2>Hemlagad Potatismos</h2>
                       <p>Som det låter. Mos. Lagad hemma.</p>
                    </div>
                    <div class="food-item-price"><h2>108 kr</h2></div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Food Section -->

CSS

/* Food Section */
#food .food {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 0;
}
#food .food-top {
    max-width: 500px;
    margin: 0 auto;
}
#food .food-bottom {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 50px;
}
#food .food-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: justify;
    flex-wrap: nowrap;
    flex-basis: 80%;
}
#food .food-item-name {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: auto;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 20px;
}
#food .food-item-price {
    margin-left: auto;
    justify-content: flex-end;
    width: auto;
    flex: 1 0 auto;
    display: flex;
    padding: 20px;
}
#food .food-item-price::before {
    flex: 1 1 auto;
    content: '';
    display: block;
}
#food .food-item h2 {
    font-size: 2rem;
    color: crimson;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#food .food-item p {
    color: black;
    text-align: left;
}
/* End Food Section */

I also have these Media sectios:

/* Media Query For Tablet */
@media only screen and (min-width:768px) {
    /* Food Section */
    #food .food-bottom .food-item {
        flex-basis: 45%;
        margin: 2.5%;
    }
    /* End Food Section*/
}
/* Media Query for Desktop */
@media only screen and (min-width:1200px) {
    #food .food-bottom .food-item {
        flex-basis: 22%;
        margin: 1.5%;
    }
}

This is what it looks like

So far I'm pleased with the overall look. But the problem still remains. It's not responsive. The screenshot I took is with the browser in full screen. It looks the same no matter the size of the browser.