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 trial

CSS

Kevin Dunn
Kevin Dunn
6,623 Points
Posted by Kevin Dunn
Kevin Dunn
6,623 Points

Having problems with the display:flex{} property

Hi,

So I'm having some problems with the display:flex{} property. When I use it in my .wrap-card{} div, it adds some margin to the right of that div, but I'm not sure how to remove that extra margin.

Here below is my code for that specific content:

<div class="tertiary-content">
            <h2 class="education-title">Education</h2>
            <i class="fa fa-graduation-cap fa-lg icons" aria-hidden="true"></i>
            <div class="wrap-card">
               <div class="card">
                  <h2>2006-2010</h2>
                  <p><strong>Eira High School</strong></p>
                  <hr>
                  <p></p>
               </div>
               <div class="card">
                  <h2>2011-2016</h2>
                  <p><strong>Haaga-Helia Univeristy of Applied Sciences</strong></p>
                  <p>(Business Information Technology)</p>
                  <hr>
               </div>
            </div>
         </div>

.tertiary-content{
  background: white;
  width: 100%;
  height: 100%;
  padding: 0 60px;
  padding-bottom: 60px;
}

.education-title,
.about-me-title,
.gallery-title{
  display:inline-block;
  float:left;
  text-align:left;
  margin-top:0;
  padding-top:20px;
  clear:both;
}

.wrap-card{
  display:flex;
  position:relative;
}
.card{
   flex-grow: 1;
   flex-basis: 0;
  background-color: #f6f6f6;
  padding: 30px 35px 45px 35px;
  margin-top: 30px;
  border: 1px solid rgba(129, 129, 129, 0.1);
}

I'm not sure if I have provided all the necessary code in order to resolve the problem, but hopefully someone could help me out...

Thanks!

Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points
Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points

This code is ok. You can send the link to workspace?

Kevin Dunn
Kevin Dunn
6,623 Points
Kevin Dunn
Kevin Dunn
6,623 Points

Sure. Here is the snapshot of my workspace: https://w.trhou.se/rdhonq0qzw

Matt Laws
seal-mask
.a{fill-rule:evenodd;}techdegree
Matt Laws
Front End Web Development Techdegree Student 24,108 Points
Matt Laws
.a{fill-rule:evenodd;}techdegree
Matt Laws
Front End Web Development Techdegree Student 24,108 Points

Hi Kevin,

I think the problem is you're not adding "box-sizing: border-box;" on the parent element - .tertiary-content. This should get the children in the correct place inside the parent.

Hope this helps.

Kevin Dunn
Kevin Dunn
6,623 Points
Kevin Dunn
Kevin Dunn
6,623 Points

Removing the float:left property from the .education-title seems to work great! Thanks a lot guys!

1 Answer

Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points
Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points

.wrap-card trying to flow around the element h2.education-title that comes before him. My solution: remove the "float:left" property from h2.education-title OR Add "clearfix" element after header of block.