Style help with Random Food Generator

Hello, Friends!

Ive included a screenshot of the issue at hand , and will explain shortly the black lines on the left and right of the screen are added by me post-screenshot

Essentially, the brains of my random food generator - the Javascript - is all set. However, I am attempting to shrink the margins on the left and right of the content that falls between it; basically “cropping” the area of the screen resolution. How would I go about doing this ? Screenshot will be included below for visuals, and all code will be provided as well. All help is appreciated.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Meal Generator</title>
<link rel="stylesheet" href="styles.css">

    <div class="container">

<h1 class="question">Feeling Hungry?</h1>
<h2 class="question">
Struggling to come up with healthy meals?

<button class="generate" id="generate" onclick=randomChoice()>
Click Me To Generate a Random Meal!

<p class="info">
    A balanced macronutrition dietary profile is of utmost importance for overall health and well-being. It refers to the consumption of an appropriate ratio of macronutrients, including carbohydrates, proteins, and fats, in the right proportions. Such a diet provides the body with essential nutrients, energy, and the building blocks necessary for various bodily functions.


    <div id = "randomMeal" class="randomMeal">
<p id = "randpick">


<script src="logic.js"></script>


// Food(s) array w/nested Objects. //

const root = document.getElementById("randpick");

const foods = [
    {  "name": 'Chicken and Rice',
        "protein": 'Protein: 45g',
       "fat": 'Fat: 12g',
       "carbohydrates" : 'Carbs: 35g',
       "total calories": 'Total Calories:  428 ',
       "image": 'Images/please-be-my-last-try.jpeg',
       "ingredient1":"Chicken (Your Choice of Cut)"
    {  "name":'Guac Omelette',
    "protein":'Protein: 30g',
    "fat":'Fat: 20g',
    "carbohydrates":"Carbs: 17g",
    "total calories": 'Total Calories: 368 kCal',
    "name":"Beef Rice",
    "protein":'Protein: 48g',
    "fat":'Fat: 22g',
    "carbohydrates":'Carbs: 52g',
    "total calories":'Total Calories: 598 kCal',
    "ingredient1":"Ground beef"
"name":"Penne Alfredo Chicken",
"protein":'Protein: 36g',
"fat":'Fat: 17g',
"carbohydrates":"Carbs: 49g",
"total calories":'Total Calories: 493 kCal ',
"ingredient1":"Chicken (Your Choice of Cut)"

   function randomChoice(){
    const userFood = foods[Math.floor(Math.random()*foods.length)];
 const foodTemplate = `
        <section class="head">
    <img src=${userFood.image}>


 <section class="blocker">
 <p> ${userFood["total calories"]}</p>
 <h1 class="ingredients"> Ingredients Needed </h1>
<li> <p class="uno">${userFood.ingredient1}</p></li>

 root.innerHTML = foodTemplate;



    background-color: lightblue;

    width: 100%;
    background: lightblue;
    display: flex;
    align-items: center;
    flex-direction: column;


.container .question{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: lightblue;

.container .generate{
color:rgb(31, 78, 94);
background-color: black;

.container .info {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
justify-self: center;
text-align: center;
background-color: transparent;
font-size: x-large;
width: 50%

.container .question2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
    background: lightblue;

.container #randpick{
    background-color: lightblue;

    background: lightblue;


font-size: xx-large;

    flex-direction: row;
    align-items: center;
    justify-content: center;


    font-size: x-large;
    justify-content: space-around;
    margin: 5%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    border: 4px solid black;

font-size: x-large;


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.