How can you align a container within a container that spans the full width?

Struggling to align a container with a max width of 1100px within a full-width container? Here is the code snippet:

<div class="container-full">
        <div class="container">
            <nav>
                <h1>Name</h1>
                <ul>
                     <li>Home</li>
                     <li>About</li>
                     <li>Contact</li>
                </ul>
            </nav>
        </div>
    </div>

The CSS styling for this structure:

.container-full {
        width:100%;
        background-color:blue;
    }

    .container {
        width:1100px;
        background-color:white;
    }

    nav {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    ul {
        list-style-type:none;
        padding:0;
        display:flex;
    }

Hmm, it seems like the issue may be related to the nav element being a flex-box. Let's explore solutions together.

htmlcssflexbox

Answer №1

If you want to easily center something horizontally with a specified width, just use the 

margin-left: auto; margin-right: auto;
trick.

.container-full {
  width: 100%;
  background-color: blue;
}

.container {
  width: 1100px;
  background-color: white;
  margin: auto;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}
<div class="container-full">
  <div class="container">
    <nav>
      <h1>Title</h1>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
</div>

Answer №2

Include some space around your container:

   margin: auto;

Answer №3

To fix the issue, make sure to include margin: 0 auto; in your .container.

Check out the live example on this link

https://i.sstatic.net/9PVXU.png

.container-full {
    width:100%;
    background: blue;
}

.container {
    width:1100px;
    background: red;
    margin: 0 auto;
}

nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

ul {
    list-style-type:none;
    padding:0;
    display:flex;
}
<div class="container-full">
    <div class="container">
        <nav>
            <h1>Name</h1>
            <ul>
                 <li>Home</li>
                 <li>About</li>
                 <li>Contact</li>
            </ul>
        </nav>
    </div>
</div>

Answer №4

Initially, I am uncertain about your desired action. If you aim to center the contents of a container relative to a full-size container, the following solution may be helpful.

If you wish to center anything in general, consider using the mixin provided below.

Example CodePen link: http://codepen.io/hellouniverse/pen/PWyVbd

@mixin  align-items () {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

@mixin flexbox() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin justify-content ($val) {
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -ms-justify-content: $val;
  justify-content: $val;
}


%aligner,
.aligner {
  @include align-items();
  @include flexbox();
  @include justify-content(center);

  &-item {
    max-width: 50%;
    &--top {
      -webkit-align-content: flex-start;
      -moz-align-content: flex-start;
      -ms-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
    }

    &--bottom {
      -webkit-align-content: flex-end;
      -moz-align-content: flex-end;
      -ms-align-content: flex-end;
      -ms-flex-line-pack: end;
      align-content: flex-end;
    }
  }
}

After integrating the above SCSS mixin, your solution will appear as:

.container-full {
  width: 100%;
  background-color: blue;
}

.container {
  width: 1100px;
  background-color: white;
}

<div class="container-full aligner">
    <div class="container aligner">
        <nav>
            <h1>Name</h1>
            <ul>
                 <li>Home</li>
                 <li>About</li>
                 <li>Contact</li>
            </ul>
        </nav>
    </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

Guide on sending a key to a text input field using JavaScript

How can I simulate sending a combination of keys (such as Ctrl+C or Alt+Shift) when the cursor enters an input text field using Javascript? I am not utilizing jQuery, but rather MS-Ajax. Is it achievable with MS-Ajax DOM? EDIT 1) Following @Ghostoy&apos ...

javascripthtmlajax

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

Using AngularJS and ChartJS together for stellar data visualization

I need help displaying the canvas element within custom angular directives. Being new to AngularJS, I am in search of a demo or idea regarding Chart.js integration with AngularJS. Important: I specifically require a custom directive for chart display. T ...

angularjshtmlchart.js

Share on your Twitter feed

Currently seeking assistance in implementing a function on my website that allows users to post their individual posts to Twitter. For example: Message: "hello world" [twitter] By clicking on the twitter button, the message will be posted along with the p ...

javascripthtmltwitter

Playing with background hues

Can anyone help me with this issue? I've been attempting to change the background color using jQuery upon document load, but it doesn't seem to be working. Any thoughts on what I might be doing wrong? http://jsfiddle.net/KczZd/2/ HTML: <d ...

javascriptjqueryhtmlcss

Bootstrap navbar-fixed-top is experiencing issues with background gradients not displaying properly

Why are background gradients not working with Bootstrap 3.0 navbar-fixed-top or bottom, only default? html, body { height: auto; width: 100%; overflow-x: hidden; } body { background: #000000; /* fallback for old browsers */ backgrou ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

htmlcssz-index

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

javascripthtmlcss

Arrange elements in different directions to accommodate smaller screens

I need help aligning my brand and the links on opposite sides (brand on left, other links on the right) for mobile view. The issue I'm facing is that the links on the right end up moving to the next line. Any suggestions or advice would be greatly app ...

htmlcssbootstrap-5

Notification of failed fetch in backbone

We are experiencing a problem with our backbone application. Our goal is to show a notification to the user when a fetch fails (due to timeout or general error). Instead of displaying an error message on a new page, we want to overlay a dialog on top of th ...

javascripthtmlbackbone.js

Creating a unique custom bullet style by utilizing the ::before pseudo-element that results in a noticeable gap between the first two

Explore this Code Here is the issue at hand: https://i.sstatic.net/Fp6u2.png My HTML code looks like this: <ol class="steps"> <li> Select elements are displaying correctly <br> <select> </ ...

htmlcss

Using Handlebars: Rendering HTML within a passed parameter to a template engine

My current setup involves using expressjs with hbs (Handlebars) as the template engine. The issue I'm facing is that when a page loads, one of the parameters passed to the template contains HTML code. However, instead of processing the parameter and d ...

htmlexpresshandlebars.jstemplate-engineexpress-handlebars

Instructions on designing a three-column layout for six separate div elements

i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...

csshtml

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

javascriptjquerywidthcss

Issues with CSS functionality

Every now and then, this thing decides to work but most of the time it just doesn't. I have multiple tables in my application and the CSS is functioning properly for all of them. There's literally no difference with this one table, yet the CSS re ...

cssasp.net-mvcasp.net-mvc-2

What is the best way to align image at the center of a jumbotron?

Exploring the world of bootstrap has been a fun journey, but I've hit a roadblock with the jumbotron element. No matter what I try, I can't seem to successfully add and center an image within the jumbotron using normal CSS3 techniques. Despite my ...

htmlcssbootstrap-4

Attempting to dynamically insert a new row into a table using jQuery, with the added condition of limiting the total number of rows to four

I'm facing an issue with a table that has no rows. I want to dynamically add rows by clicking an anchor tag, with a limit of 4 rows. When the limit is reached, I need to display an alert message saying "only 4 rows allowed." However, currently, it kee ...

javascriptjqueryhtml

Difficulty encountered with changing font color on CSS

I'm having trouble fixing the text color, it's currently white and blending in with the background. I've set the color to #1a6eb6 for both the TEXT element and the submenu list items, but it's not working. Can someone assist me with thi ...

htmlcsscss3pie

HTML5 full-screen API and its compatibility with different browsers

I'm curious to know the level of support for HTML5 full-screen API in popular browsers. Which is the earliest version of each browser that fully supports it? And for any browsers that don't (like IE I suppose), are there third-party libraries ava ...

htmlfullscreen