CSS - I add space between the components of the layout, but the color of the space does not match the body color

I am aiming for my website layout to have distinct margins between the left and right side of the content, as well as between the header and navbar. However, I do not want these spaces' colors to change to match the body's background color.

https://i.sstatic.net/tSCAU.png

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h1><p></p></h1>
        </div>
        <div id="nav">
            <ol>
                <li><a href="<?php echo base_url();?>index.php/member">Home</a></li>
                <li><a href="#">About us</a>
                    <ol>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Other Items</a></li>
                    </ol>
                <li><a href="#">Contact us</a></li>
            </ol>
        </div>
        <div id="content">
            <div id="left-side">
             Content goes here
            </div>
            <div id="right-side">
                <div class="loginbox">
                    <?php echo form_open('login');?>
                        <h2 style="text-align:center;"> Login </h2>
                        <ul id='login'>
                            <li>
                                <span style="margin-right:10px;">Username:</span><br>
                                <input type='text' name='username'>
                            </li>
                            <li>
                                Password:<br>
                                <input type='password' name='password'>
                            </li>
                            <br>
                            <li>
                                <input type='submit' name='btn2' value='Log in'>
                            </li>
                            <li>
                                <br>
                                <?php echo anchor("register/index","Register");?>
                            </li>
                            <li>
                                <?php echo anchor("", "Forgot Password");?>
                            </li>
                        </ul>   
                    <?php echo form_close();?>
                </div>
            </div>

        </div>
        <div id="footer"><p>Footer</p></div>
    </div>
</body>

CSS

 html,body{margin:0px;padding:0px;font-size:13px;}
    body{background:#cceeff;font-family:"verdana"; }
    #wrapper{margin:auto;padding:0px;width:75%;background:#FFF;}
    #header{margin:0px;padding:0px;width:100%;height:18vh;float:left;background:#99d6ff;}
        #header h1{margin:0px;padding:0px;font-size:20px;padding-bottom:10px;}
    #nav{margin:0px;padding:0px;width:100%;float:left;margin-top:10px;background: #80ffe5;}
        #nav ol{list-style:none;margin:0px;padding:0px;}
        #nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
        #nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
        #nav ol a:hover{background:#f2f2f2;
        -webkit-transition: background-color 0.3s ease-out;
        -moz-transition: background-color 0.3s ease-out;
        -o-transition: background-color 0.3s ease-out;
        transition: background-color 0.3s ease-out;
        }
            #nav ol ol{position:absolute;top:35px;left:0px;display:none;background: #80ffe5;}
                #nav ol ol li{border-bottom:1px;}
    #content{margin:0px;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
        #right-side{float:left;margin-left:10px;width:30%;border: solid 1px grey;background:white;}
            #right-side ol{list-style:none;}
        #left-side{float:left;width:70%;border: solid 1px grey;background:white;}
    #footer{float:left;margin:0px;padding:2vh;width:100%;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        background: #99d6ff;
    }
    .loginbox
    {
        background: #9999ff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
    .loginbox ul li
    {
        list-style:none;
        margin-left:-10px;
    }

Answer №1

To update your CSS, you can either modify line 3 to match the background color or simply delete the background property entirely as shown below.

#container{margin:auto;padding:0px;width:75%;background:#edf7ff;}

#container{margin:auto;padding:0px;width:75%;}

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

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

What causes custom CSS properties to be overridden by Material UI CSS class properties?

I encountered an issue while attempting to utilize an npm package containing a Typography element from Material UI. The code is authored by me. Upon integrating it into a project, I noticed that the typography's CSS class properties were overpowering ...

Adjust the CSS property dynamically based on the quantity of items within a div container

Can CSS3 be used to style the children divs of a parent div with specific conditions, such as: If there are 3 divs, apply property x to divs 1 and 2. If there are 2 divs, apply property x to div 1. If there is 1 div, do not apply property x to it. Is jQ ...

Why isn't setInterval set to a duration of one thousand milliseconds?

While trying to use some code from w3schools, I noticed that the setInterval in the example is set to 5 instead of 5000. Shouldn't it be in milliseconds? If not, how can I speed up this animation? When I try reducing it to decimals like 0.01, the anim ...

Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

Access WordNet using JavaScript

Currently developing a web application that involves NLP tasks. In my past projects, I have used the JWNL library in Java which has always served me well. I am curious to know if you have any advice on the most effective approach for querying the WordNet ...

HTML5, canvas covering every element

Below is the code that I am working with: <html> <head> <title>canvas</title> </head> <body> <canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas> ...

Guide on how to organize a list into three columns using a single ul tag

Is there a way to split a ul list into 3 columns using CSS? This is how my HTML structure looks like: <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li> ...

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

How to locate an element in Webdriver/Selenium when it lacks a class name, id, or css selector?

Within the search results displayed in groups of 7, you can find the address and phone number for each entry on the right side as follows: I need to extract both the address and phone number for each result. The challenge lies in how these elements are st ...

Enhance your website design with Bootstrap's unique styling for jumbotron elements

I am currently working on developing a mobile website for calendar events and I need some help. Here is the basic version of the site that I have created so far: The issue I am facing is that the purple backgrounded areas only cover the text, rather than ...

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

My plan involves utilizing a Java web service to fetch the HTML content from a specific URL using Jsoup, and then returning it as a string to the requesting party, which could be an Angular or JS script. I am keen on preserving this content somewhere and l ...

Issue with modal rendering in Bootstrap4 when the body is zoomed in

I am encountering an issue with a Bootstrap html page where the body is zoomed in at 90%. The Bootstrap modal is displaying extra spaces on the right and bottom. To showcase this problem, I have created a simple html page with the modal and body set to 90% ...

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind ...

Issue with Bootstrap margins and padding

While creating an application form from scratch with Bootstrap, I encountered a peculiar issue. The element with ID officeaddress is missing from the HTML page upon loading. I've experimented with the my class in Bootstrap and attempted to add line br ...

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...