What is causing the elements to not fill the entire width of the page?

How can I make 6 flex items have the same width and occupy the full width with minimal margins between them? Currently, there is too much margin, especially on larger screens. Any suggestions on how to achieve this without excess spacing? Thanks!

Example:

https://jsfiddle.net/dskox7jc/

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  border: 1px solid orange;
  border-radius: 5px;
  padding: 10px;
  margin-right: 20px;
  min-width: 150px;
  margin-bottom: 30px;
}

.item-count {
  font-size: 150%;
  font-weight: bold;
}

.item-status {
  font-size: 125%;
  font-weight: bold;
}
<div>
  <div>
    <span class="flex">
      <span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status less text</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status more text in this status</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
</div>
</div>

htmlcssflexbox

Answer №1

Greetings John! We are glad to have you here on stackoverflow!

If the first child of your flex container is an <a> tag, then you should style it accordingly. Simply add:

.flex > a {
  flex: 1;
}

This will help eliminate the padding between the boxes.

Answer №2

Experience the power of Bootstrap's Layout & Flex with this helpful guide: https://getbootstrap.com/docs/4.3/utilities/flex/

Your design will take shape like the example below, but feel free to customize as needed:

<!-- 
  Check out Bootstrap documentation: https://getbootstrap.com/docs
-->
<div class="container">
  <div class="row d-flex justify-content-center align-items-center m-2">
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status less text</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status with more text</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>

</div>
</div>

.item {
  border: 1px solid orange;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
}

.item-count {
  font-size: 150%;
  font-weight: bold;    
}

.item-status {
  font-size: 125%;
  font-weight: bold;
}

.col-4 {
  margin-bottom: 20px;
}

Check out the design in action on JSFiddle

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

Using PHPs nth-child in media queries

There are multiple images on MyPage, typically displayed in rows of 6. However, the number of images per row adjusts based on browser size using media queries. The issue arises with the margin set for the last image in each row, as the nth-child property r ...

phphtmlcss

click to delete submenu dropdown

I need assistance with removing or hiding the dropdown submenu when clicking on the item. We are using bootstrap for CSS. Can someone please help me? Below is the code snippet: <ul class="dropdown-menu" style="display: block; position: static;"> & ...

javascriptjqueryhtmlcss

Using Flask to trigger a Python function that requires input parameters when a button is clicked

I am working on a Flask web application that includes a download button. Instead of triggering a JavaScript function, I want the button to execute a Python method. This Python method should take the recently modified HTML code from the webpage as input. H ...

javascriptpythonhtmlajaxflask

Simultaneously uploading numerous files with distinctive filenames in CodeIgniter

Just starting out with codeigniter and curious - how can I upload multiple files to the server simultaneously with different names using codeigniter? ...

phphtmlcodeigniterfile-upload

Is it possible to rearrange div elements within different containers using media queries and CSS in Bootstrap4?

I've been utilizing the first/last utility in BS4, but my scenario requires relocating an element to and from a completely different section of the page. For instance, let's imagine I have the following setup: <div id='area1'> ...

jquerycssbootstrap-4

Integrate an external component and unleash reactivity with Vue 3

I have two different projects/folders (utilizing Lerna at the root level). The first project is uicomponents, containing various components, while the second project involves testing a simple application that utilizes some components from uicomponents. W ...

htmlvue.jscomponentsvue-componentvuejs3

Arranging Functions in JavaScript

I am encountering an issue regarding the execution of JavaScript functions within HTML. Specifically, I am using dimple.js to create a graph and need to select an svg element once the graph is created via JavaScript. Despite placing my jQuery selector as t ...

javascriptjqueryhtmlsvgdimple.js

Updating the color scheme of the selected nav-item and showcasing the corresponding page in relation to the navbar selection

I have been trying various methods, but I am unable to change the background color of an active navigation item and also display the corresponding page. Important: The jQuery code below successfully changes the background color of the navbar list item. Ho ...

jquerycssnode.jsbootstrap-4ejs

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Attempting to upload information into database via web browser: the save() function is disabled in order to avoid data loss caused by an unsaved associated item 'ship'

I'm completely puzzled as to why I am encountering this error. It's strange because when I execute similar code in the Python shell, I never encounter such an error. However, when attempting to run it through a web browser, the error crops up. An ...

pythonhtmldjango

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Discovery As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's ...

javascripthtmlscrolldom-events

The troubleshooting of compatibility issues between TailwindCSS and HTML Input and Button tags

Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with ...

htmlcssbootstrap-4next.jstailwind-css

What is the best method for creating a close button on the bottom right corner with Bootstrap?

I need help adjusting the position of a button in a flash message. How can I move the button to the bottom-right? <div class="alert alert-danger alert-dismissible fade show" role="alert"> <%= success %> ...

htmlcssbootstrap-5

Manipulating dynamic form inputs: utilizing JQuery to assign and update values with Materialize autocomplete

In the process of creating an invoice page that allows users to search for a product, I have implemented auto-fill functionality where details are automatically populated. Values retrieved from the database are used to populate the Materialize dropdown an ...

javascriptjqueryhtmlajaxmaterialize

Prevent clicking on a specific column in a table using Jquery

Attempting to utilize Jquery for clicking on a table row in order to navigate to a new page. However, encountering an issue with the last column containing a button that redirects to a new page when clicked on the edge. Is there a way to disable the oncl ...

javascripthtmljqueryjsp

Remove the opacity setting from a transparent box that covers the entire page

I find that real code tends to be more complex, but this snippet does a good job of highlighting the issue at hand. In my setup, there's a background video playing (in this case, just as the background), and on top of that sits a transparent watch fa ...

htmlcss

Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust aro ...

cssreactjsmaterial-ui

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

javascripthtmljquerydom

Efficiently Managing Forms with SharePoint Online

Recently, I created a basic HTML/PHP form that collects input data and generates a company-approved email signature in HTML format. The form simply captures the information entered by users and displays it in the signature layout. Check out the form below ...

javascripthtmlformssharepointsharepoint-online

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

htmlcss