Trying to create a responsive grid using html and css

Question

For the two orange div boxes in this code look a bit awkward. The right div's margin is slightly narrower than the left div's. How do I fix this?

CSS:

    html {font-size: 1em;}
body {margin: 0; padding: 0;}

.row,
.column {
    box-sizing: border-box;
}
div.box {
        background-color: rgba(230, 126, 34,1);
        width: 37em;
        padding: 2em 0;
        margin-left: 2em;
        margin-top: 2em;
        text-align: center;
        display: inline-block;


.container {
    background-color: slategrey;
    width: 100%;
    height: 72em;

user5245837 · Accepted Answer · 2015-09-29 03:33:22Z

1

I think its because of the inline: block try to change it to float: left;

div.box {
    background-color: rgba(230, 126, 34,1);
    width: 37em;
    padding: 2em 0;
    margin-left: 2em;
    margin-top: 2em;
    text-align: center;
  //display: inline-block;
    float: left;

}

answered Sep 29, 2015 at 3:33

user5245837

Sign up to request clarification or add additional context in comments.

1 Comment

roadtocode Over a year ago

I thought display: inline-block can replace float: left

Collectives™ on Stack Overflow

Trying to create a responsive grid using html and css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related