Shaded box with bootstrap palette

After implementing Bootstrap to make my website responsive, I noticed that adding the container caused a white margin that does not blend with the background color. How can I fix this issue?

https://i.sstatic.net/2gGL6.png

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2b2d3e2f1f6b716a716c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <section class="lndForm">
    <div class="containerform">
      <div class="row">
        <div class="col-md-6" id="div2">
          <div class="textCTA">
            <h2 class="title"> Ajudando pessoas comuns a passar na redação ENEM </h2>
            <form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c0e13180e151b130e15130f124f3c1b111d1510521f1311">[email protected]</a>" method="POST">
              <input type="hidden" name="_captcha" value="false">
              <input type="hidden" name="_next" value="http://margarethredacoes.com.br/">
              <label for="nome">Nome</label> <br>
              <input type="text" name="NOME" id="" required> <br>
              <label for="email" required>Email</label> <br>
              <input type="email" name="E-MAIL" id="" required> <br>
              <label for="telefone">Telefone</label> <br>
              <input type="text" name="TELEFONE" id="" required>
              <button type="submit" onclick="alerta()">Continuar</button>
            </form>
          </div>
        </div>
        <div class="col-md-6" id="div1">
          <div class="containerimage">
            <img src="/Imagens/professora.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It's not entirely clear from your inquiry how you approached styling with CSS. Allow me to clarify in a different manner.

When assigning a background color to a section, it's advisable to apply it to the parent HTML tag. For instance, I designated the background color of this section to the section tag 

<section class="bg-success">
. To create margins on both the left and right sides, you can utilize the container class in the child block element, as demonstrated below:

<section class="bg-success">
  <div class="container">
    <!-- your content here -->
    <p class="text-light">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</section>

However, if you implement the reverse strategy by applying the container class to the section 

<section class="container">
and setting the background color in the child block element 
<div class="bg-success">
, the background will be confined within the container with white margins on the left and right sides. See the example below:

<section class="container">
  <div class="bg-success">
    <!-- your content here -->
    <p class="text-light">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</section>

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

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

htmlhtml5-audio

Eliminate the margin on the subnavigation menu

Hey there, I'm looking to adjust the layout of my menu buttons by removing the left and right "margins" (if that's the correct term), so they all fit neatly inside the navigation bar. https://i.sstatic.net/udes8.png I want to ensure that all th ...

htmljquerycss

Why is the placement of PHP code (for file uploads) in relation to HTML code important?

I am in the process of learning PHP. Could someone please provide an explanation for why this issue is occurring? I find myself extremely puzzled and struggling to comprehend even the smallest detail. I'm also interested in gaining a clear grasp of ho ...

phphtmlposition

Encountering an error message related to Bootstrap carousel: "Unable to read property 'offsetWidth' of undefined"

Encountering a frustrating error message: "Cannot read property 'offsetWidth' of undefined" when using Bootstrap carousel. Let me share my code with you: <div id="myCarousel" class="carousel slide" > <ul class=& ...

javascriptcssbootstrap-4

Mobile display trapping Bootstrap navbar

Can anyone help me figure out why my navbar is stuck in its mobile display? Here is the link to the code: http://jsfiddle.net/enL35t1q/ Navbar <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul cla ...

htmltwitter-bootstrapbootstrap-4navbarnav

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Adjust the position of all content below when the specific div slides down

I am attempting to create a notification div that smoothly slides down when active. The sliding effect is achieved through this script: <script type="text/javascript> $(document).ready(function(){ $('#notice').slideDown(1000); ...

javascriptjqueryhtmlcss

Add elements to a ul element using JavaScript and make the changes permanent

Managing a dashboard website with multiple div elements can be quite tedious, especially when daily updates are required. Manually editing the HTML code is inefficient and time-consuming. Each div contains a ul element where new li items need to be added ...

javascripthtmlappendchild

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

cssreactjsmaterial-ui

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

What is the process for dynamically assigning a color picker hex value as HTML attributes in PHP?

Is it possible to create a color picker that allows the user to select a hex value and then automatically apply it as an attribute in an HTML tag, like shown below? <p style="background-color: #FCF8C0;">TEXT GOES HERE</p> In the code example ...

phphtml

Looking to assign a variable to the value selected from a dropdown menu in PHP/HTML

As a beginner in php and html, I have been tasked with creating a drop down list along with other inputs to establish parameters for a perl script. The objective is for the selected option from the drop-down menu to set a variable equal to the user's ...

phphtmldrop-down-menu

Setting text alignment in Bootstrap based on breakpoints

Imagine this code: import React from 'react' import DarkPattern from '../Assets/dark-pattern.jpg' const Profile = () => { return ( <div> <section className="bg-dark text-light text-center " ...

cssreactjswebbootstrap-4react-bootstrap

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

I'm still learning about SVG and I'm trying to trigger an event that captures the click coordinates when clicking on the SVG. I have a few questions: Since I'm using Angular, I'm unsure if it's possible to keep my function in th ...

javascripthtmlangularsvgonclick

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Place an element in relation to the vertical size of a div that includes written content

Currently, I am working on implementing a button with a popup that appears underneath it when the user hovers over it. The specific requirements for this setup are: The size of the button should not affect the size of the popup The popup should always be ...

javascripthtmlcss

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

csstwitter-bootstrap