What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color?

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

I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this issue?

I have checked the CSS for parent elements but couldn't find anything that could be causing the problem. Below is the CSS and HTML code. I suspect the error lies within the CSS.

HTML:

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="css/style.css">
    <header id="header">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Logo">
        <nav id="navbar">
            <ul id="nav-list">
                <li><a class="nav-link" href="#newsletter">Newsletter</a></li>
                <li><a class="nav-link" href="#video">Video</a></li>
                <li><a class="nav-link" href="#privacy">Privacy</a></li>
            </ul>
        </nav>
    </header>

    <body>
        <section id="newsletter">
            <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
                <label for="email">Subscribe to our newsletter!</label>
                <br>
                <input type="email" id="email" placeholder="Your E-Mail" required>
                <br>
                <input type="submit" id="mail-news-submit" value="Subscribe!">
            </form>
        </section>
    </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* Debugger for unwanted CSS properties. Source: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
  }
*/

:root {
    --smoky-black: #191516ff;
    --green-sheen: #72bda3ff;
    --apricot: #ffcab1ff;
    --brick-red: #ce4257ff;
    --little-boy-blue: #72a1e5ff;
    font-family: 'Roboto', sans-serif;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color:white;
    width: 100vw;
    height: 2.5vw;
    top: 0;
    left: 0;
}

#nav-list {
    padding-right: 1vw;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: grey;
}

#nav-list li {
    list-style: none;
    display: inline-block;
}

#header-img {
    width: 20vw;
}

#newsletter {
    text-align: center;
    padding-top: 3vw;
    background-color: var(--apricot);
    margin: 0;
}

#email, #mail-news-submit {
    margin-top: 0.3vw;
    margin-bottom: 0.3vw;
}

#mail-news-submit {
    color: white;
    background-color: var(--smoky-black);
    padding: 0.5em 1em;
    border-radius: 10em;
    border: none;
}

Answer №1

To eliminate the default settings, make sure to take out the margin and padding from the body.

If this solution works for you, kindly acknowledge by marking my response as accepted.

body {
margin: 0;
padding: 0;
}

Answer №2

By default, browsers have a margin set in their user agent stylesheet (e.g. 8px in Google Chrome). To remove this margin, you must explicitly set the margin for the body to 0, as shown in the previous answer.

body {
margin: 0;
}

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

SQL Query: Change text color based on the result number retrieved

After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...

Model-view-controller datasets incorporating viewbags

How can I utilize a dataset in a viewbag to showcase the data in a view? I have obtained a dataset from a model and stored it in a viewbag. My intention is to extract the datarows using a foreach loop within the view. Since I already have a variable bein ...

Press the Concealed Button Enclosed in a div Using Selenium with Python

Currently, I am in the process of automating the login on the Workday portal by utilizing Chrome WebDriver in Selenium. My main challenge lies in figuring out how to click on a hidden sign-in button with the following properties: <div class="css-1s ...

What is the best way to show the page before loading custom fonts?

My website is time-sensitive and I need it to prioritize displaying the page before loading any custom fonts. Essentially, I want the page to show up initially as if the fonts are not loaded. This way, the custom fonts (if already cached by the browser) w ...

Managing various choices in a Select menu using a single submit button

My method of using mysql to insert data into dropdown menus is not working as expected. Each dropdown menu has a unique name assigned from the database query $stmt. The content for each dropdown menu is retrieved through another query, $stmt2. My goal i ...

In order to showcase an image ahead of another (stay tuned),

Help! I'm facing a dilemma here. I have an abundance of adorable animal images with unique facial expressions, but there's one problem - the eyes are hidden! I desperately want to showcase those captivating eyes. This is what my code looks like. ...

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

Is there a way to determine if a line has been automatically wrapped within a textarea element?

Is it possible to detect when text is wrapped onto the next line in a textarea after becoming wider than the area? ...

Emptying the AnyChart (Javascript) container prior to generating new charts

I have been utilizing the anychart JavaScript library to generate a pie-chart from my data, which is dynamically pulled whenever a user modifies a dropdown selection. Below is the code snippet I am employing for this purpose: var stage = anychart.graph ...

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

Scrolling up occurred upon opening the bootstrap modal

When a model is opened, the page automatically scrolls to the top and remains at the top when the model is closed. This HTML uses the Blade engine: <div class="row mt-0 name"> <a class="text-wrapper text-xs inviteeModel ...

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

Simple method for extracting data from JSON and saving it into an array with jQuery

I have a JSON file containing the resource "A" and literals "B", "C", and "D". My goal is to extract only the items B, C, and D, convert them into strings, and store them in an array. Below is the script I have written for this purpose: <script> // ...

Tips on extracting values from HTML utilizing a CSS selector in instances where only class and style attributes are present. The class in question is generic and may be utilized elsewhere as well

''' 29/11/2021 ''' I have a code snippet that retrieves dates from a table on a webpage, but it also fetches other values along with the date. I am looking for a way to extract just the d ...

Updating hyperlinks from dynamic php links to stable static links

I have a script that predominantly uses absolute addressing, but now I need to switch to relative addressing. The problem I'm encountering is when trying to change the links in PHP from: <link href="<?php print $theme; ?>style.css" type="tex ...

Why isn't the input appearing on the succeeding line below?

<label for="email2">Enter Your Email Address</label> <input type="text" name="email2" id="email2" placeholder="example: [email protected]"> <label for="phone2">Phone Number</label> <input type="text" name="phone2" id= ...

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

Finding image input loading

When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...

Issue with Laravel css not being correctly processed by the elixir function in xampp environment

After creating a versioned css file with the following code: elixir(function(mix) { mix.sass('demo.scss') .version('css/demo.css'); }); The file can be found at public/build/demo-34f5737738.css. According to the documentation, ...

jquery-ui allowing to resize child divisions as well

Currently, I am in the process of developing a website that includes resizable divs with jQuery. However, I have encountered an issue where only the width of the child divs is being resized when I adjust them. For reference, you can view the site and its c ...