What is the best way to eliminate excess space on the right side of a div element

I recently utilized a column structure with bootstrap 4, resulting in a layout with 1 row containing 2 columns:

  <div class="left">
        <hr class="container hline">
        <div id="main" class="container border">
            <div class="row">
                <div class="col-lg-5 top">
                </div>
                <div class="col-lg-5 top">
                /*Widget on the right exhibits excessive margin*/
                </div>
           </div>
       </div>
    </div>

However, the right-hand widget is plagued by excessive empty space, despite both columns being set to the same length (col-lg-5). How can I eliminate this extra space while maintaining equal column sizes?

Check out the codepen here

htmlcssbootstrap-4

Answer №1

It is recommended to utilize columns within rows based on a 12 column grid system. Currently, you have allocated 10 columns width by using two .col-5 columns. Additionally, there seems to be an extra pixel for a divider within the row in the codepen, even though it is not visible in the example provided.

Have you considered using two .col-6 columns instead and making the divider a left border on the right column?

https://codepen.io/anon/pen/xaeWGB

<div class="left">
    <hr class="container hline">
    <div id="main" class="container border">
        <div class="row">
            <div class="col-lg-6 top">
            </div>
            <div class="col-lg-6 divider top">
            </div>
       </div>
   </div>
</div>

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

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

Insert a new row into the table with a value that is taken from the input fields on the form

view image details I am working on a form that consists of 4 fields: Name, Last name, email, and role. There is also a button. When the button is clicked, the input from the above form should be added as a new row in a table below. ...

htmlangularforms

How to reduce the default width of Bootstrap carousel components

Click here for the 1st image. To view the 2nd image, click here. This represents the carousel code used on this particular website: <div class="row testing"> <div id="carouselExampleMen" class="carousel carousel-dark s ...

pythonhtmlcsswebbootstrap-5

Unable to view a basic bottle webpage on Raspberry Pi from a PC

After referencing the instructions found at , I successfully tested them on a Raspberry Pi using the following code snippet: from bottle import route, run @route('/hello') def hello(): return "Hello World!" run(host='0.0.0.0', port ...

pythonraspberry-pihtmlraspbianbottle

What are the steps for implementing two Li elements in HTML with distinct attributes?

Usage I decided to utilize li elements in various ways on a single web page. I used them as part of a navbar at one point and then later repurposed them for an image grid. Issue The problem arises when the dropdown menu within the navbar is partially hid ...

htmlcss

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

htmlcssiosipadsafari

Ways to verify the application of CSS hyphens using Chrome's developer tools

I cannot seem to get automatic hyphens to work via CSS. I have applied the following CSS: body { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } Despite adding this CSS, my text is not being hyph ...

htmlcssgoogle-chromegoogle-chrome-devtoolscss-hyphens

Troubleshooting Problem with Button Image Display in CSS

I have created a custom CSS for a PayPal sprite that I made. Below is an image comparison showing how it appears in Internet Explorer and Firefox. Here is the code to display the sprite: .ppsprite { background: url('/images/paypal_sprite.png') ...

css

Here's the secret to completely getting rid of emoji as symbols

I'm facing an issue with using a regular symbol (specifically the up-right-arrow) in a Wordpress menu. When I paste the symbol character into the required field, it shows up correctly on desktop but on my iPhone, it displays as an emoji rather than th ...

htmlwordpresshexsymbolsemoji

Struggling to perfectly center the NavBar within the wrap container

After working on my navbar and utilizing this site for guidance, I was able to center it using text align. However, there is an odd indent in the navbar that I can't seem to figure out. This indentation throws off the alignment when centered, giving i ...

csscenternavbarindentation

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

Error: An error occurred because the program attempted to read properties of a null value, specifically the property "defaultPrevented"

There seems to be an issue with a script error involving both the bootstrap alert and my own close alert tag. I have a script set up to automatically close alerts after 2.5 seconds when certain user actions trigger them, such as creating a blog post or del ...

javascripthtmldjangoerror-handlingbootstrap-5

Utilize Bootstrap's toggle button in the navigation bar to smoothly shift the content to the left

Recently, I encountered an issue with the navbar on my website. In the mobile version, whenever the toggle button in the navbar is clicked, it results in the website shifting to the left and causing the content to be off-center. However, when I view the w ...

cssbootstrap-5

Issue with background image positioning in IE 7 while scrolling

I am struggling with creating nested divs where the middle one has a fixed background image that remains static while the rest of the content scrolls. My solution works in Firefox, Chrome, and Opera but I'm encountering issues in IE7. Despite knowing ...

csshtmlbackground-imageinternet-explorer-7

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

javascripthtmlcssright-to-left

Resounding achievement following the completion of the upload

I'm looking to display the message "success" on the same page as my form if it uploads correctly. I am new to PHP and not sure how to achieve this. Can anyone help? index.php <form action="upload" method="POST"> <input name="field1 ...

phphtml

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

javascripthtmlcsstypescriptsaas

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

What is the method to retrieve a string from a specific element in Selenium using Python?

I'm facing a challenge in extracting a specific string from the following HTML element: <textarea class="FormTextArea__textarea form-control" aria-label="Photo Caption" aria-describedby="photo-caption__help" id="photo-caption" rows="3">Exterior ...

pythonhtmlpython-3.xselenium