I’ll send my CSS and PHP but I copied some code from the internet to make a live chat, but while the menu to choose a display name is open, the footer and sidebar are not there. It’s a fucking mess but it’s still a WIP. Once you add a display name my footer and sidebar are visible, and it looks lovely. I’m very new and this is for a school project so just want to get it done if possible.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');


body {
    color: black;
    padding: 0px;
}

h1 {
    color: black;
    text-align: center;
}
/* set up site grid  */

.wrapper {
    display: grid;
    grid-template-columns: 300px 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "logo banner banner"
        "nav nav nav"
        "side main main"
        "footer footer footer";
    grid-gap: 4px;
}

/* Area styling */

.box {
    border: solid 1px #000;
    padding: 20px;
    border-radius: 10px;
    background-color: #A6A6A6;
}

/* Area colouring */

.logo, .banner, .footer {
    background-color: #545454;
}

.side {
    background-color: #545454;
}

/* Area Specifics */

.logo {
    grid-area: logo;
    padding: 0;
    height: 199px;
    width: 300px;
    background-image: url(/img/pexels-jess-bailey-designs-762687.jpg);
}

.banner { 
    grid-area: banner;
    font-size: 150%;
}

.nav {
    grid-area: nav;
    font-size: 150%;
    text-align: center;
    word-spacing: 5px;
    background-color: #545454;
}

.main {
    grid-area: main;
}

.side {
    grid-area: side;
}

.footer {
    grid-area: footer;
    text-align: right;
}

/* Font */

h1, h2, h3, h4 {
    font-family: 'Open Sans', sans-serif;
}       
    
/* Nav links */

.nav a {font-weight: bold;}
.nav a:link, .nav a:visited {color: darkblue}
.nav a:hover {color: darkblue; text-decoration: none;}

/* links */
a {font-weight: bold;}
a:link {color: darkblue;}
a:visited {color: darkblue;}
a:hover {color: #AD5ADF;}

/* Side Bar Links */
.side a:link{color: darkblue;} /*pale pink */
.side a:visited{color: darkblue;} /* light gray */
.side a:hover{color: #AD5ADF;} /* light brown */

audio { 
    display:none;
}

.contact {
    text-align: center;
    width: 100%;
}

.img {
    border-radius: 10px;
}
.imgcircle {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    float: left;
    padding-left: 15px;
} 
.imgcircle img { 
    width: 400px;
    height: 100%;
    margin-left: -50px;
    margin-right: 50px;
    padding-right: 10px;
}
.textright {
    text-align: right;
}

* {
    margin: 0;
    padding: 0;
  }
   
  body {
    margin: 20px auto;
    font-family: "Lato";
    font-weight: 300;
  }
   
  form {
    padding: 15px 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
   
  form label {
    font-size: 1.5rem;
    font-weight: bold;
  }
   
  input {
    font-family: "Lato";
  }
   
  a {
    color: #0000ff;
    text-decoration: none;
  }
   
  a:hover {
    text-decoration: underline;
  }
   
  #wrapper,
  #loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #eee;
    width: 690px;
    max-width: 100%;
    border: 2px solid #212121;
    border-radius: 4px;
  }
   
  #loginform {
    padding-top: 18px;
    text-align: center;
  }
   
  #loginform p {
    padding: 15px 25px;
    font-size: 1.4rem;
    font-weight: bold;
  }
   
  #chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #fff;
    height: 300px;
    width: 640px;
    border: 1px solid #a7a7a7;
    overflow: auto;
    border-radius: 4px;
    border-bottom: 4px solid #a7a7a7;
  }
   
  #usermsg {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ff9800;
  }
   
  #name {
    border-radius: 4px;
    border: 1px solid #ff9800;
    padding: 2px 8px;
  }
   
  #submitmsg,
  #enter{
    background: #ff9800;
    border: 2px solid #e65100;
    color: white;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 4px;
  }
   
  .error {
    color: #ff0000;
  }
   
  #menu {
    padding: 15px 25px;
    display: flex;
  }
   
  #menu p.welcome {
    flex: 1;
  }
   
  a#exit {
    color: white;
    background: #c62828;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
  }
   
  .msgln {
    margin: 0 0 5px 0;
  }
   
  .msgln span.left-info {
    color: orangered;
  }
   
  .msgln span.chat-time {
    color: #666;
    font-size: 60%;
    vertical-align: super;
  }
   
  .msgln b.user-name, .msgln b.user-name-left {
    font-weight: bold;
    background: #546e7a;
    color: white;
    padding: 2px 4px;
    font-size: 90%;
    border-radius: 4px;
    margin: 0 5px 0 0;
  }
   
  .msgln b.user-name-left {
    background: orangered;
  }
 <?php include("head_nav_chat.html"); ?>
   <div class="box main">
       <?php
 
session_start();
 
if(isset($_GET['logout'])){    
     
    //Simple exit message
    $logout_message = "<div class="msgln"><span class="left-info">User <b class="user-name-left">". $_SESSION['name'] ."</b> has left the chat session.</span><br></div>";
    file_put_contents("log.html", $logout_message, FILE_APPEND | LOCK_EX);
     
    session_destroy();
    header("Location: chat.php"); //Redirect the user
}
 
if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
        $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
        echo '<span class="error">Please type in a name</span>';
    }
}
 
function loginForm(){
    echo
    '<div id="loginform">
    <p>Please enter your name to continue!</p>
    <form action="chat.php" method="post">
      <label for="name">Name &mdash;</label>
      <input type="text" name="name" id="name" />
      <input type="submit" name="enter" id="enter" value="Enter" />
    </form>
  </div>';
}
 
?>
 
<?php
    if(!isset($_SESSION['name'])){
        loginForm();
    }
    else {
    ?>
        <div id="wrapper">
            <div id="menu">
                <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
                <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
            </div>
 
            <div id="chatbox">
            <?php
            if(file_exists("log.html") && filesize("log.html") > 0){
                $contents = file_get_contents("log.html");          
                echo $contents;
            }
            ?>
            </div>
 
            <form name="message" action="">
                <input name="usermsg" type="text" id="usermsg" />
                <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
            </form>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            // jQuery Document
            $(document).ready(function () {
                $("#submitmsg").click(function () {
                    var clientmsg = $("#usermsg").val();
                    $.post("post.php", { text: clientmsg });
                    $("#usermsg").val("");
                    return false;
                });
 
                function loadLog() {
                    var oldscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height before the request
 
                    $.ajax({
                        url: "log.html",
                        cache: false,
                        success: function (html) {
                            $("#chatbox").html(html); //Insert chat log into the #chatbox div
 
                            //Auto-scroll           
                            var newscrollHeight = $("#chatbox")[0].scrollHeight - 20; //Scroll height after the request
                            if(newscrollHeight > oldscrollHeight){
                                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                            }   
                        }
                    });
                }
 
                setInterval (loadLog, 2500);
 
                $("#exit").click(function () {
                    var exit = confirm("Are you sure you want to end the session?");
                    if (exit == true) {
                    window.location = "chat.php?logout=true";
                    }
                });
            });
        </script>
</div>
<div class="box side">
    <h3>Helpful Websites</h3>
    <p> This list of helpful websites is for when you have used all the features on this website, and want to learn more!
    </p>    
    <ul>
        <li><a href="https://www.smokefree.org.nz/help-advice/learn-about-vaping">Smokefree</a></li>
        <li><a href="https://vapingfacts.health.nz/help-and-support.html">VapingFacts</a></li>
        <li><a href="https://www.healthnavigator.org.nz/healthy-living/e/e-cigarettes-and-vaping/">Health Navigator</a></li>
        <li><a href="https://www.health.govt.nz/our-work/regulation-health-and-disability-system/regulation-vaping-and-smokeless-tobacco-products/vaping-information-specific-                          audiences/vaping-information-stop-smoking-services-and-health-workers/stop-smoking-programmes-using-vaping-products">Ministry of Health</a></li>
        <li><a href="https://www.hpa.org.nz/vaping">H.P.A</a></li>
    </ul>
        <img src="raw_assets/vapebeingheld.jpg" alt="Vape being held up" height="300" width="250">
    </div>
    <?php include("footer.html"); ?>
<?php
}
?>