How to center align my 2 column layout

Question

Im trying to make the two inline-block divs to be aligned in the center

why is there white space on the right side of the div

.wrapper {
  border: red 2px solid;
  min-width: 40%;
  display: inline-block;
}

body {
  width: 80%;
  margin: 0 auto;
  border: 1px black solid;
}

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

Possible duplicate of [How to remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Ahmad Abu Saa, Sep 17 '17 at 20:10
have you tried : `body{text-align:center;}`, for the gap, follow the link of the previous comment if `body{font-size:0;} .wrapper{font-size:1rem}` doesn't tell anything to you :) — G-Cyrillus, Sep 17 '17 at 20:23

score 1 · Answer 1 · answered Sep 17 '17 at 20:10

1

You have set the width of your columns to 40%. Little maths 2*40 = 80%. And you have 100% of your parent element. Change width to 50% and you won't have any white spaces.

answered Sep 17 '17 at 20:10

Ognjen Stefanovic

405
5
16

score 0 · Answer 2 · answered Sep 17 '17 at 20:05

0

You have to take in consideration that the wrapper is acting on a 100% base not a 80%.

.wrapper {
  border: 2px red solid;
  min-width: 50%;
  display: inline-block;
}

answered Sep 17 '17 at 20:05

Johnny Dew

971
2
13
29

score 0 · Answer 3 · answered Sep 17 '17 at 20:08

Even using Flex will be good.

.wrapper {
  border: red 2px solid;
  min-width: 40%;
  display: block;
  flex: 1;
}

body {
  display: flex;
  width: 80%;
  margin: 0 auto;
  border: 1px black solid;
}

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

score 0 · Answer 4 · answered Sep 17 '17 at 20:27

inline-block elements can be centered via text-align from a parent (here body).

To deal with the white-space: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

text-align + font-size can be a start:

body{font-size:0;text-align:center} .wrapper{font-size:1rem}

.wrapper {
  border: red 2px solid;
  min-width: 40%;
  display: inline-block;
}

body {
  width: 80%;
  margin: 0 auto;
  border: 1px black solid;
}

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

<div class="wrapper">
  <h1>
    hello
  </h1>
</div>

How to center align my 2 column layout

4 Answers4