Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialSteve Gallant
14,943 PointsUsing display:inline method for columns - extra horiz whitespace after col 3
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%;
}
}
---
1 Answer
Andreas Nyström
8,887 PointsHi 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!
Steve Gallant
14,943 PointsHello Andreas, thank you very much for the response. I did remember about the extra whitespace between inline-block elements, but did not think it would cause such a large effect. I added the negative margin and everything looks perfect now. Thanks!
Steve
Andreas Nyström
8,887 PointsAnytime! If you think as this answer as the solution to your problem please mark it as "best answer". Thank you :)
Steve Gallant
14,943 PointsSteve Gallant
14,943 PointsAttempting screenshot:
!(https://ibb.co/j6jdSm "Note extra light blue space after third column")