Using display:inline method for columns - extra horiz whitespace after col 3

Question

This was a good challenging exercise. I decided to try using display: inline rather than float to get more practice with it. Everything basically looks right except there is a ghost margin of sorts right after the text in the tertiary column when >1025px. I will post a screenshot if I figure out how. Google dev tools show the three columns taking up appropriate width, but there is just too much white space to the right of the text in column 3, making the layout look lopsided. Any tips appreciated!

Steve

CSS is pasted below. HTML file looks exactly like Guil's at the end with proper containers, etc.

---
/* =================================
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* =================================
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
    margin: 0;
    text-align: center;
}

.main-nav {
    margin-top: 5px;
}

.main-nav li {
    text-align: center;
}

.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

/* ---- Layout Containers ---- */

.banner {
    color: #fff;
    background: #3acec2;
    padding: 3.2em 0;
    margin-bottom: 50px;
}

.col {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
}

.banner,
.main-footer {
    text-align: center;
}
.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

.headline {
    margin-bottom: 0;

}

/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {

.col {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.container {
    width: 90%;
    margin: 0 auto;
}

.secondary,
.primary {
    width: 49%;
    background-color: lightblue;
}

.main-nav li {
    margin-left: 1.25em;
}

.name,
.main-nav,
.main-nav li {
    display: inline-block;
}

.name {
    margin-right: 50px;
}

.tagline {
    font-size: 1.4em;
}
    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}   /* ----- end of media query block ----*/

@media (min-width: 1025px) {

.container {
        width: 80%;
        max-width: 1150px;
    }

.primary {
    width: 40%;
}

.secondary,
.tertiary {
    width: 27%;
}


}
---

Answer 1 · 2017-11-28T17:30:00Z

November 28, 2017 5:30pm

Hi Steve.

When using inline-block there is automatic some space between each inline-block. Remember when you did the navigation with inline-block and you set margin-right: -4px to remove the spaces between the buttons? You can do a similiar thing here:

@media (min-width: 1025px) {

  .container {
    width: 80%;
    max-width: 1150px;
    }

  .primary {
    width: 40%;
    margin-right: -5px;
  }

  .secondary, .tertiary {
    width: 30%;
    margin-right: -5px;
}

}

Please note that what happens is that all columns together actually takes up 100% of the 1150 with now and is in fact centered with margin: auto now. Hope this helps buddy!

Welcome to the Treehouse Community

Looking to learn something new?

Steve Gallant

Steve Gallant

Using display:inline method for columns - extra horiz whitespace after col 3

Steve Gallant

Steve Gallant

1 Answer

Andreas Nyström

Andreas Nyström

Steve Gallant

Steve Gallant

Andreas Nyström

Andreas Nyström