How to Horizontally Align My Divs

How can I horizontally align my divs?

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

CSS - How do I align my divs horizontally?

It's rather usual solution without modern css3 grid and flex abilities. We can set display: inline-block and position: relative for wrapper boxes, after that we set position: absolute for inner boxes and positioning them to corners.

body {  min-width: 840px;}
.box {  display: inline-block;  width: 200px;  height: 200px;  position: relative;}
.box-inner {  height: 50%;  width: 50%;  position: absolute;}
#box-grey {  background-color: grey;}#box-grey #box-orange {  background-color: orange;  right: 0;  top: 0;}#box-black {  background-color: black;}#box-black #box-yellow {  background-color: yellow;  bottom: 0;  right: 0;}#box-blue {  background-color: blue;}#box-blue #box-green {  background-color: green;  bottom: 0;  left: 0;}#box-purple {  background-color: purple;}#box-purple #box-pink {  background-color: pink;  top: 0;  left: 0;}

<!doctype html><html><head>    <link rel="stylesheet" type="text/css" href="stylesheet.css">    <title>Boxes</title></head><body>    <div id="box-grey" class="box">      <div id="box-orange" class="box-inner"></div>    </div>    <div id="box-black" class="box">      <div id="box-yellow" class="box-inner"></div>    </div>    <div id="box-blue" class="box">      <div id="box-green" class="box-inner"></div>    </div>    <div id="box-purple" class="box">      <div id="box-pink" class="box-inner"></div>    </div></body></html>

Why aren't my divs horizontally aligned?

Update

Sorry about the fiddles, there must be a limit on free accounts. Anyways I placed the demo in a snippet.

Looks like I made the first demo too quick and made a different layout than the one you wanted, my bad. Here's a layout that builds on the first one, basically I made #siteNav flex column.

Column Layout

@charset "utf-8";
/* Core CSS */
html {  box-sizing: border-box;  font: 400 16px/1.45'Source Code Pro';}*,*:before,*:after {  box-sizing: inherit;  margin: 0;  padding: 0;  border: 0;  outline: none;}body {  background: #121;  color: #FEF;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  position: relative;  width: 100vw;  height: 100vh;}#siteNav {  display: flex;  flex-flow: column nowrap;  width: 100%;}#creators {  text-align: center;}.creator_name {  width: 31%;  display: inline-block;}.big-part {  display: table-cell;  text-align: center;}#about,#work,#creators {  width: 100%;}

<nav id="siteNav">  <section id="about" class="big-part">    <h3>About us</h3>    <p>Text</p>  </section>
  <section id="work" class="big-part">    <h3>Work</h3>    <p>Text</p>  </section>
  <section id="creators" class="big-part">    <h3>Creators</h3>    <div class="creator_name">      <h4>Name</h4>      <p>Text</p>    </div>    <div class="creator_name">      <h4>Name</h4>      <p>Text</p>    </div>    <div class="creator_name">      <h4>Name</h4>      <p>Text</p>    </div>  </section></nav>

CSS - How to align divs horizontally?

Giving white-space: nowrap to the body tag and display: inline-block to the div tag does the trick.

Working Fiddle

How can I horizontally center an element?

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

How do you easily horizontally center a div using CSS?

In the case of a non-fixed width div (i.e. you don't know how much space the div will occupy).

#wrapper {  background-color: green; /* for visualization purposes */  text-align: center;}#yourdiv {  background-color: red; /* for visualization purposes */  display: inline-block;}

<div id="wrapper">        <div id="yourdiv">Your text</div></div>

How do I horizontally align 2 divs inside a parent div

If you make the cssBoxText a flex too and then apply some flex properties you should be able to do this without too many problems:

.cssBoxText {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

Alternatively if you add:

align-items: center;
align-content: center;

To .cssAward that should do it too.

Flex makes solving layout issues quite easy. You need to commit to using it though. If you start mixing flexbox with floats and vertical-align, text-align etc you may get unexpected results.

It's worth reading up on flexbox - it's really powerful.

Horizontal and Vertical Align Div

May I suggest flexbox, the parent div will be set to that with justify content and align-items set to center. Then a child div with your html inside it will be centered.
https://css-tricks.com/centering-css-complete-guide/

.parent{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div> your HTML here </div>
</div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>