What could be the reason for my div wrapper not showing up in the page preview?

I was expecting to see a centered div(wrapper) with a width of 940px and a black background-color when I previewed my page, but for some reason, there is no evidence of this wrapper even though there are no obvious errors in my HTML or CSS. My CSS is properly connected to my HTML file and all other elements can be formatted except for the wrapper. Why is this happening?

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link href="css/styles.css" type="text/css"
    rel="stylesheet">
</head>

<body>
    
  <div id="wrapper">
      
      <header>
      <h1>
      Exotic Honey    
      </h1>
      </header>
      
      <main>
          
     <form action="http://compass.northseattle.edu/~aali/it111/form/formhandler.php" method="post">
         
     <fieldset>
         
        <legend>Place Order</legend> 
         
     <label>Name</label><input type="text" name="name">
         
     <label>Email</label><input type="email" name="email">
         
    <label>Payment</label>
         <ul>
             <li><input type="radio" name="payment" value="mastercard">MasterCard</li>
             <li><input type="radio" name="payment" value="visa">Visa</li>
            <li><input type="radio" name="payment" value="americanexperess">AmericanExpress</li>
         </ul>
         
         <label>Honeys</label>
         <ul>
         <li><input type="checkbox" name="honey" value="pitcairn">Pitcairn</li>
         <li><input type="checkbox" name="honey" value="sage">Sage</li>
        <li><input type="checkbox" name="honey" value="lavendar">Lavendar</li>
         </ul>
         
        <label>Continents</label>
         <select name="regions">
         <option value="na">North America</option>
        <option value="sa">South America</option>
        <option value="eu">Europe</option>
        <option value="as">Asia</option>
        <option value="af">Africa</option>
        <option value="oc">Oceania</option>
         </select>
         
    <input type="submit" value="submit">
     </fieldset>    
     </form>
     </main>
      
      <aside>
      <figure>
         <img class="right" src="images/honeypic.jpg" alt="honey jar">
          <figcaption>Rare exotic honey</figcaption>
      </figure>
      
      </aside>
      
    
    
    <footer>
        <ul>
    <li>Copyright &copy;</li>
        <li><a href="">Terms of use</a></li>
        <li><a href="http://compass.northseattle.edu/~aali/it111/index.html">Web design by Alas</a></li>
        </ul>
    </footer>
      
      </div>

</body>
</html>

Here's my CSS

<style>

div#wrapper{
        width:940px;
        margin:20px auto;
        background: black;     
    }

  
header{
    color:goldenrod;
    height:auto;
    background-color:purple;
    margin:20px auto;
    text-align:center;
    font-style:italic;
}

footer{
    color:goldenrod;
    height:auto;
    background-color:darkred;
    clear:both;
}

footer ul{
    list-style-type: none;
    margin-left:20px;
}

footer li{
    float:left;
    margin-right:30px;
}
    
    
    
    main{
        background-color:beige;
        float:left;
        width: 500px;
        
    }
    
    aside{
        width:250px;
        float:right;
        margin-right:30px;
        padding-right:30px;
        background-color:darkgray;
        
    }
    
    label{
        display:block;
     }
    
    
    
    input[type=submit]{
        width:auto;
    }
    
    input[type=radio]
    input[type=checkbox]{
        width:auto;
        height:auto;
        margin-right:5px;
        margin-left:5px;
        
    }
    
    form li{
        list-style-type: none;
        margin-left:auto;   
    }
    
    legend{
        font-size:1.3em;
        font-style:italic;
    }
    
    .right{
       width:250px;
        height:250px;
        padding-right:30px;
        margin-right:30px;
    }
   
</style>    

Here's the preview

https://i.sstatic.net/4AHxf.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

Vertical alignment issue with Primefaces ConfirmDialog after AJAX form update

One issue I am facing is with a form that expands using Ajax+Rendered when certain operations are clicked. The problem arises when my p:confirmDialog is not vertically centered as the form grows. It is perfectly centered when at its "normal size." I have ...

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

Modifying the page header content using JavaScript

There's this snippet of code that alters the image on another page: <div class="imgbx"> <button onclick="window.location.href='index.html?image=images/xr-black.jpg&tit=XR-black'" >Invisible ...

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content

My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...

What are the steps to ensure that the content within the <pre><code></code></pre> tags displays correctly in Internet Explorer 7?

When using JQuery to make an AJAX pull with JSON to an ASP.net Web Service, the following code is used: $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "TestWebService.asmx/Foo", data: "{}", dataType: "json", success: function( ...

What's the best way to modify the style property of a button when it's clicked in

I am working with a react element that I need to hide when a button is clicked. The styles for the element are set in the constructor like this: constructor(props) { super(props); this.state = { display: 'block' }; this. ...

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

As I've been exploring different options, I've noticed a small but impactful nuance. When working with jQuery or other UI tools, I really enjoy being able to see my changes instantly. While Adobe Dreamweaver's live view port offers this func ...

Issue with background image not covering entire div

I am experiencing an issue where the background image of a div element is not occupying the full image. I want to display images side by side with text underneath them. Below is the CSS code: .img-w { position: relative; background-size: cover; ba ...

Difficulty encountered in getting html email signature to appear correctly on Outlook

I have developed a personalized email signature using HTML. Here's the unique code: <html> <!-- Insert your company logo here --> <div id="far_left" style="width: 50px; height: 50px; float: left; ...

The Art of Revealing an Element

Is it possible to manipulate a parent div element in JavaScript without affecting its child nodes? For example, transforming this structure: <div class="parent"> <div class="child"> <div class="grandchil ...

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

`Is there a way to manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

Currently, I am working on an HTML5/JS application using Node.js in Netbeans 8.2. As I develop the welcome page, I intend to incorporate Bootstrap 4. However, when I attempt to add bootstrap.min.css to my stylesheets folder, I encounter an error as shown i ...

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

Is it possible to create Android apps using HTML and JavaScript?

I have a strong foundation in HTML, Javascript, CSS, and AJAX, but I want to venture into Android application development. However, I lack knowledge of Java technology. Is it feasible to develop Android apps using HTML or JS? If anyone has experience wit ...

Make the image take up the entire screen in HTML

My goal is to display an image that fills the entire screen. Here's how my HTML code looks: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> ...

Loading a local CSS file upon opening a tab with a specific URL

When opening a tab to load a local HTML file from an addon (using addon-sdk), the following code is used: tabs.open({ url: self.data.url('index.html'), onReady: myScript }); However, there seems to be no straightforward way to include a CSS ...