The contact us page's layout issue cannot be resolved by adjusting the left and right borders of the parent div

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

<div class="col s1 m-5" style="background-color: white">
    <div id="gd1" style="background-color: aqua;width: 100%;align-items: center;height: 20%;border-radius: 1% 1% 0 0;margin: 0;text-align: center;color: white;;">
      <br>  
      <h4>
        CONTECT US 3
      </h4>
      <i class="fa fa-facebook m-3"></i>
      <i class="fa fa-twitter m-3"></i>
      <i class="fa fa-google m-3"></i>
    </div>
    <input type="text" value="Your Name" name="Phone"  class="inpb"><br>
    <input type="text" name="E-mail" value="Your Mail"  class="inpb"><br><br><br><br><br>
    <textarea name="" id="" class="inpb" cols="20" rows="1" style="border-top: 1px solid;border-bottom: 0px;">Massege</textarea>
    <button id="gd1" class="bt1 m-5 p-1" style="width: 80px;float: right;" > SEND</button>
  </div>

Employing Css, Bootstrap 5. This particular issue with the Contact Us page not aligning correctly with the borders of the parent div needs to be addressed. Looking for a solution to cover the full 100% area of the parent div.

htmlcssbootstrap-5

Answer №1

If you find yourself needing to collaborate through a CodPen, take note that the "m-5" class has been mistakenly added to your parent div. This class is actually a default from Bootstrap designed to create margin around the parent element. For more detailed information, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/

I hope this explanation proves helpful!

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

Is there a way to prevent the letters from moving when I hover over them?

What occurs when the numbers are hovered over: https://gyazo.com/20b6426d435551c5ee238241d3f96b4d Whenever I hover over the pagination numbers, they shift to the right, and I am unsure of what mistake I made in my code that's causing this. Below, I ...

javascripthtmljquerycss

Positioning two buttons side by side in separate columns on the same horizontal alignment

My objective is to arrange these two buttons horizontally on the same level with the help of bootstrap. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href ...

htmlcssbootstrap-4

Graphical representation in the body of an email using bar graphs

Can a dynamic bar graph be created in an email message? It should be compatible with Outlook. I want to include a graph in an email sent using oracle database, where the dynamic values will be passed through a procedure. ...

csshtmlhtml-emailbar-chart

Can information be transferred to a CSS document?

Currently working on developing a content management system (CMS) using PHP and exploring the possibility of passing a URL to an image. In my PHP pages, I am utilizing Twig templates and the {{ image1url }} to display the image URL. Is there a way to pas ...

phphtmlcsssymfony

smoothly slides into view and playfully bounces

http://jsfiddle.net/E6cUF/ The concept involves a grey box sliding left from behind a green box after the page is fully loaded, with a slight bouncing effect if possible. Update: I created a new version inspired by modifications made by others on the jsf ...

javascriptjqueryhtmlcssslide

Getting rid of the IE pseudo-element that shows up on the right edge of a password textbox

My form consists of two text boxes for username and password entry. While entering text in these boxes, I noticed that Internet Explorer (IE) has specific pseudo-elements for the Username and Password fields: Username textbox: <input class="form- ...

cssinternet-explorer-11pseudo-element

What is the proper way to place a newly added element using absolute positioning?

Currently, I am in the process of developing a tooltip feature. This function involves adding a div with tooltip text inside it to the element that is clicked. However, I am facing a challenge in positioning this element above the clicked element every tim ...

javascripthtmlcss

What is the best method for creating an HTML table using a JSON object?

Currently, I am in the process of developing an express app that can render a csv file and convert it into a json format. Within my method, I have this json data stored as a variable and my goal is to display it as a table on an HTML page. How can I effect ...

htmlnode.jsjsoncsvexpress

Transform page appearance using CSS exclusively, without altering DOM structure

I have a structure that must remain unchanged for various reasons. Here is the current layout: <h1>heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLore ...

htmlcss

Is there a way to extract a list of words from a designated element using selenium?

I have been trying to scrape the content of this webpage 10 Fast Fingers in order to extract the words that need to be typed into a list. My intention is to then input these words into a text box for typing practice. The code seems to be running fine, but ...

pythonhtmlcssselenium-webdriverweb

Creating an image slideshow with a looping JavaScript array: Step-by-step guide

One issue with the program is that when it runs, only the last array value image is displaying on the screen while the other images are not. Below is the HTML code: <img id="mg" alt="image not found"> And here is the JavaScript code: var images=[ ...

javascripthtmlcss

What purpose does the alert-dismissible feature serve?

I am trying to implement an alert box using Bootstrap for my project <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> ...

csshtmlbootstrap-4

Attempting to alter the animations depending on the color button that has been selected

Bootstrap radio buttons are being utilized. I want the animation to change when one of these buttons is selected. I am currently working on changing colors in JavaScript. I attempted to use a for each loop but encountered errors stating that it is not a ...

javascripthtmlcssbootstrap-4

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

javascriptcssmaterial-uidrop-down-menujsx

What is the best way to display a page within a div when clicking in Yii?

I'm trying to use the jQuery function .load() to load a page into a specific div. Here's my code: <a href="" onclick="return false;" id="generalinfo"> <div class="row alert alert-danger"> <h4 class="text-center">Gen ...

javascriptphpjqueryhtmlyii

The functionality of jQuery .on() method does not apply to dynamically generated elements

Currently, I am in the process of developing a website where a logout button is dynamically inserted into a sidebar when the window reaches a specific size. Upon clicking the log out button, I intend to execute the method logOut(); The anchor tag ID is co ...

javascriptjqueryhtmleventsanchor

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

javascriptjqueryajaxhtmlwcf

The image in the HTML is currently positioned at the bottom, but I would like it to be

this is what it looks like: https://i.sstatic.net/VLqN7.png I need it to be at the top next to the first card. <!-- top nav--> <nav class="navbar navbar-expand-lg navbar-light" style="background-color:white"> <a class="navbar-brand" ...

javascripthtmlcss

Trouble with Bootstrap 4 Carousel functionality

Having encountered an issue with the carousel module on Bootstrap 4, I've spent a significant amount of time troubleshooting with no success. In the hopes of finding a solution, I'm reaching out here for assistance! (Despite checking other relat ...

javascriptjqueryhtmltwitter-bootstrap

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui