Implementing a maximum width container within a grid item

Having a container with a max-width of 80 rem and margin-inline set to auto, when applied to the grid, it perfectly centers the grid within 80 rem.

 <div class="grid-container container">
        <header class="primary-header flex "> //i want to put container class here
            <h1 class="logo uppercase text-white">adventure</h1>
            <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria- 
            expanded="false"><span class="sr-only">Menu</span></button>
            <nav class="flex">
                <ul id="primary-navigation" class="primary-navigation flex text-white capitalise 
                letter-spacing-3 fs-base" data-visible="false">
                    <li><a href="">home</a></li>
                    <li><a href="">tours</a></li>
                    <li><a href="">explore</a></li>
                    <li><a href="">about</a></li>
                    <li><button class="btn bg-pink text-white ">contact</button></li>
                </ul>
            </nav>
        </header>
        <main></main>
    </div>

Attempting to place the container class in the header cell item doesn't yield the expected results. Instead of centering at 80rem as desired, all header content is centered without reaching that size. The issue seems related to margin-inline but still perplexing.

.flex {
  display: flex;
  gap: var(--gap, 2rem);
}
.grid-container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  text-align: center;
}
.container {
  max-width: 80rem; 
  margin-inline: auto;
}

Answer №1

<div class="grid-container container">
https://i.sstatic.net/FA76N.jpg

Applying the 'container' class to the parent 'grid-container' div sets max-width: 80rem; and margin-inline: auto;. This configuration ensures that when the viewport width exceeds 80rem, the available inline margin is evenly distributed on both sides between the div and its parent (body), effectively centering the div. As for the child header, it inherits the left alignment within its container by default.


<header class="primary-header flex container">
https://i.sstatic.net/GaZb4.jpg When the 'container' class is applied to the header, the div width is no longer constrained, causing the available inline margin to be divided equally between the header and the div. Consequently, the header becomes centered with the margin being based on the actual width of the header (around 40rem) rather than the max-width setting.


To restrict only the header to a max-width without affecting main, adding width: 100% to .container will achieve the desired outcome

.flex {
  display: flex;
  gap: var(--gap, 2rem);
}
.grid-container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  text-align: center;
}
.container {
  width: 100%;
  max-width: 80rem; 
  margin-inline: auto;
}
<div class="grid-container">
  <header class="primary-header flex container">
    <h1 class="logo uppercase text-white">adventure</h1>
    <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false"><span class="sr-only">Menu</span></button>
    <nav class="flex">
      <ul id="primary-navigation" class="primary-navigation flex text-white capitalise letter-spacing-3 fs-base" data-visible="false">
        <li><a href="">home</a></li>
        <li><a href="">tours</a></li>
        <li><a href="">explore</a></li>
        <li><a href="">about</a></li>
        <li><button class="btn bg-pink text-white ">contact</button></li>
      </ul>
    </nav>
  </header>
  <main></main>
</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

What is the best way to customize the appearance of the input checkbox in Twitter Bootstrap?

I need help in creating a simple input checkbox since I couldn't find any optional class in Bootstrap. I also checked libraries on GitHub but nothing seems as straightforward as Foundation. Thank you for your assistance. ...

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

Randomly position a div within a grid

I am currently working on creating a grid that spans 100% of the width of the browser window. Firstly, I am unsure about how to approach this grid creation, and secondly, I would like to have a div randomly positioned within the grid, filling the space onl ...

Styling your tables with custom CSS in Bootstrap 4

Looking to design a unique CSS for a Bootstrap 4 table without impacting other standard tables. Can anyone provide the specific CSS code for customizing this table and setting it for all elements? <table class="table table-responsive table-bordered t ...

Text will not be visible within the div container

I'm working on a mobile layout design for my css project. My goal is to have the header and footer remain fixed on the screen while allowing users to scroll through the content in between. I was able to achieve the fixed positioning, but now none of m ...

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

Step-by-step guide to creating a pop-up div that appears on hover and remains visible when clicked

I'm trying to figure out how to make a popup appear when the mouse hovers over it and then stay visible when clicked on. The issue I'm facing is that currently, the popup disappears when the mouse moves away from it. How can I modify the code so ...

creating a mixin for a box-shadow value of none in LESS CSS

I'm encountering a challenge with implementing the box-shadow mixin in LESS css. Here's the mixin for box-shadow: .boxShadow (@x, @y, @blur, @spread: 0, @alpha) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-s ...

Is it possible to determine if a HTML element has word-wrap applied, causing a word to break in the middle of the text?

Inside a div, I have Persian text that wraps because I've used word-wrap: break-word; and the div's size is smaller than the text. <div class="r25" style="width: 13.3333px; height: 50px;"> <p style="font-size: 8px;">This is an ex ...

Positioning a colored anchor beneath a menu that remains fixed in place

I am trying to adjust the position of a link anchor on a page with a fixed positioning menu. I found a solution in the discussion titled Fixed position navbar obscures anchors that works for me, but the issue I am facing is that the background color of t ...

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

What is the best way to create a scroll and card-stack animation using React and TailwindCSS?

I am looking to create scrolling animations similar to the ones demonstrated below using React, Next.js, and TailwindCSS. It's a bit difficult to describe this effect (scroll -> stack -> appear), but essentially as the user scrolls down, the ne ...

Modifying the dimensions of an image within a :before pseudo-element

Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one: How to Resize Image Using CSS Pseudo-elements ...

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access

My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...

Transferring Element Information to a Bootstrap Modal

Struggling to figure out why the solutions I find are not working for me. It seems like it may be related to my understanding of how elements load in a specific order. I have a common issue - trying to pass data from a button into a modal it triggers. Spe ...

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

Using the `not()` CSS selector to target specific children elements

Is there a way to add a specific attribute to all input[type=text] elements while excluding certain elements that do not have a class but their parent does? Here is an example of the HTML structure: <tr class="filters"> <td> <i ...

Flexbox columns with equal widths for Internet Explorer

I am currently working on a flexbox column layout that needs to be compatible with IE10. One issue I have encountered is that IE tends to expand a flex child based on its contents, while other browsers keep each flexbox at an equal width. To address this ...