Margin isn't functioning properly

My section is not centered and adding margin-left doesn't seem to be working. Any suggestions on how I can solve this?

Take a look at how it appears.

Here's the code:

.margins {
  margin-left: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d5648564a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row margins">

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AnonymousCode/anonymouscode.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">ANONYMOUS; CODE</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH</h4>
      <p class="card-text""> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AI-nirvana/ai_nirvana.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">AI: THE SOMNIUM FILES</h4>
      <p class="card-text"> </p>
    </div>
  </div>

</div>

htmlcssbootstrap-5

Answer №1

Here is the solution...

Avoid using margins, and utilize Bootstrap's d-flex justify-content-center classes on the row instead.

Check out the code snippet below.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f415f43">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row margins d-flex justify-content-center">

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AnonymousCode/anonymouscode.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">ANONYMOUS; CODE</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AI-nirvana/ai_nirvana.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">AI: THE SOMNIUM FILES</h4>
      <p class="card-text"> </p>
    </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

Adding the target='_parent' attribute to the infowindow of a Google Fusion Map by utilizing a click event listener

As someone who is relatively new to Google Fusion, I am eager to expand my knowledge and skills. Recently, I created a customized map with an infowindow and embedded it onto my website using the FusionTablesLayer Wizard. I wanted to avoid using the target= ...

htmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Javascript program that generates drag and drop elements using HTML5 features:

Whenever I attempt to drag and drop elements that are normally created by HTML, everything works fine. However, when I try to drag and drop elements generated by JavaScript, I encounter the following error: Uncaught TypeError: Cannot read property 'p ...

javascripthtmldrag-and-dropgenerated

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Vaadin DropDown list showcasing options with unique identifiers

My current issue revolves around a ComboBox feature that allows users to select contacts from their contact list. Although the ComboBox displays contact names, it lacks the ability to directly map to the true contact as it requires the contact ID. I am str ...

htmlcomboboxvaadin

Utilizing CSS to align all HTML form elements at the center

Is it possible to centrally align all form labels and input fields by using CSS? If so, what would be the approach for a form where the label text is displayed vertically above the input field? #fieldset label { display: block; } #fieldset input ...

htmlcssforms

Cannot locate module: Error: Unable to find the path '../containers/Layout' in '/home/yusquen/Projectss/react-shop/src/components'

https://i.stack.imgur.com/U1097.png description of image goes here Issue with module: Error: The file '../containers/Login' could not be found in the 'react-shop/src/components' directory. ...

javascripthtmlcssreactjsnpm

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...

jqueryhtmlcss

How to remove an item with a click using jQuery and PHP?

I have a question about deleting an item I just clicked on. I'm having trouble tracking it and resorting to drastic measures (like posting here) to delete everything in the list. Code Snippet: <div class="image-list"> <?php $count = 1; if ( ...

phpjqueryhtml

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

javascriptjqueryhtmlcsswordpress

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

javascripthtmlcsscss-transitionsbootstrap-5

An error that cannot be recovered from occurred: Trying to access a method called viewConfessionLikes() that is

Greetings! I am currently facing an issue on my website where the page displaying the most liked post is showing an error message: Fatal error: Call to undefined method Confession::viewConfessionLikes() on line 55 Unfortunately, this page is not showing a ...

phphtml

Avoid placing content before a link to ensure better focus

I came across some CSS code that closely resembles the following code. (I copied it from http://jsfiddle.net/LmvgM/8/ thanks @thirtydot). I noticed that when the link is focused, the :before content is included. Is there a way to remove it from the highli ...

css

Utilize CSS exclusively on the "Theme Options" page within a Wordpress website

Everything is running smoothly with my current PHP code, which controls the design of my "Theme Options" page under the WP API Appearance menu. However... The issue is that the CSS stylesheet is affecting all other menus in the WP dashboard as well, like ...

phphtmlcsswordpresswordpress-theming

Attempting to decipher the @media queries CSS code responsible for the slider on this particular website

I'm having trouble with the cover not fully expanding when the browser size is less than 750. I am new to using bootstrap. For reference, I am looking at this website: CSS .slide-wrapper { position: relative; } /* Not using now .carousel-caption ...

cssruby-on-railstwitter-bootstrap-3

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Troubleshooting Problems with CSS Three-Column Layout

Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...

htmlcsssmarty

Separating stylesheets, head, and other elements in a curl response

After successfully using curl to retrieve an external site, I noticed that the results were interfering with my own content. The CSS from the external site was affecting my webpage's layout and z-index values were conflicting. I am seeking a solution ...

javascriptphphtmlcsscurl

Troubleshooting Problems with CSS Before Selector and Margins

Currently, I am attempting to utilize the before selector in order to replicate some list item behavior for elements. Due to constraints where I cannot use list items, it is crucial that I find a way to make styles work effectively. If you would like to s ...

csshtml

PHP and MySQL form is not being updated with new data

In my database, the fields include: id,name,email_id,address,phone_no,username,password,category,date <?php include_once('connect_to_mysql.php'); if(isset($_POST["submit"])){ $a=mysql_real_escape_string($_POST["name"]); ...

javascriptphpmysqlhtml

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel