Struggling to identify which css or bootstrap statement is impacting the arrangement of the form layout

I'm facing an issue with setting a border and background color behind a form. When I attempt to do so, the form is aligned to the right and I can't pinpoint which part of my code is causing this misalignment.

Here's an example: https://jsfiddle.net/gpakfdtL/. Please disregard the django code - I included it in the example just in case it might be the root of the problem.

This is how I would like it to look: https://jsfiddle.net/w8py15kg/1/ (not exactly, but notice that the form is centered).

If anyone can help me figure out why my form is shifted to the right like that, I would greatly appreciate it!

csstwitter-bootstrapforms

Answer №1

Your width is set as fixed. I attempted to change it to 100% and the change was successful.

Check out the result here: https://jsfiddle.net/5gw7na4z/

#job_search_form {
    margin: 50px auto 50px auto;
    width: 100%; <--- THIS LINE
    text-align: center;
    background-color: blue;
    border: 10px solid black;
    padding: 50px;
}

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

Formatting Dates and Times in a Bootstrap Form

I'm working on a form that includes date and time type inputs. The fields are set up for mm/dd/yyyy date format and 12-hour AM/PM notation for time. However, I prefer to use dd/mm/yyyy date format and 24-hour notation for time. Is there a way to make ...

htmltwitter-bootstraptwitter-bootstrap-3

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

htmlcsssasshaml

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

htmlcsssublimetext3font-family

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

Ways to display form choices that are influenced by other form selections

In my form, the user is supposed to choose a specific item at the end. As they fill in the initial options, the subsequent fields below change dynamically. Here is an example: Type: { t1:{ Number of X:{ 1:{...} 2:{...} ...

javascriptformsdependencies

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

htmlcssinput

Identifying the moment when attention shifts away from an element

Is it possible to detect when focus occurs outside an element without relying on global selectors like $(document), $(body), or $(window) for performance reasons? If achieving this without global selectors is not feasible, provide a provable reason expla ...

javascriptjqueryhtmlcss

"Effortlessly Enhance Your HTML with Auto-Complete CSS Classes in Sublime Text

Is there a way to enable CSS auto-complete for classes in Sublime Text 2? For instance, I have linked a CSS file in my HTML document link rel="stylesheet" href="css/style.css" In the CSS file, I have defined the following class: .container-primary { ...

htmlcsssublimetext2code-hinting

Transitioning React Hover Navbar Design

I'm currently revamping a click-to-open navbar into a hover bar for a new project. I have successfully implemented the onMouseEnter and onMouseLeave functions, allowing the navbar to open and close on mouse hover. However, I am facing an issue with ad ...

javascripthtmlcssreactjssass

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

javascriptjqueryhtmlcss

jQuery id selector issue: not selecting elements properly

It seems like I am overlooking a very fundamental aspect here. Essentially, there are 2 div elements in the HTML markup. When one is clicked (#x), the other div element (#block1) gains a new class (.change), resulting in a change in its color. The issue ...

jqueryhtmlcssclick

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this: How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id ...

javascripthtmlcssjsonajax

When the button is clicked, remove the border-bottom

Looking for help with CSS to hide the border-bottom of a button when clicked? I've attached an image for reference. Any suggestions or solutions would be greatly appreciated! View attached imageView attached image I've tried using active, focus ...

htmlcssuser-interface

Codeigniter form_dropdown value failing to update upon submission

Situation Currently, I have an edit form that allows editing of companies in my database. To associate a category with each company, I am using a joined table. The structure of my tables is as follows: Companies --------- idcompanies companyname country ...

phpmysqlformscodeignitersql-update

Retrieve a value by using the getBoundingClientRect method

While experimenting with code from W3Schools, I attempted to modify it in order to assign the resulting LEFT value to another element (DIV). Here is an example of getBoundingClientRect Despite correctly retrieving the left value of 8, nothing seems to be ...

javascriptcssgetboundingclientrect

Is it possible to retrieve the form value in Angular that is different from what is displayed?

Is there a way in Angular to retrieve form values differently than how they are displayed? For example, let's say you have an Angular FormInput that displays the value "3,567.56 $" to the user. <input formInputControl="price" money> I want th ...

angularforms

Tips for Implementing Large-Text Breadcrumbs with Heading Tags Using Bootstrap 5

I need assistance with creating large heading text breadcrumbs without breaking the layout. Any suggestions? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b ...

htmltwitter-bootstrapbootstrap-5

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...

javascripthtmlcssrazorsummernote

The attribute of the Angular div tag that lacks an equal sign

Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...

javascripthtmlcssangularjsattributes

What is the best way to manage the alignment of elements within their parent containers in my situation?

Attempting to replicate the design of a website by starting with the navigation bar. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https: ...

javascripthtmlcsstwitter-bootstrapbootstrap-4