# Euonmymus - practise - justify-content not working

**URL:** <https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657>\
**Category:** I Built This\
**Created:** [October 28, 2018, 9:03pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657 "2018-10-28T21:03:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 28, 2018, 9:03pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/1 "2018-10-28T21:03:04Z")

</div>

I am practising the css3 that i know and apply it in practise underneath the large them i am trying to flex the items which works however justify-content fails to be applied, doe someone understand what is happening? here is the [link](http://salvatoresaia.com/euonymus/):

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 28, 2018, 10:04pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/2 "2018-10-28T22:04:42Z")

</div>

Do you have a link to the code?

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 28, 2018, 10:10pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/3 "2018-10-28T22:10:30Z")

</div>

We also need to know exactly where you are trying to do this.

Remember that `justify-content` is applied to the major axis and `align-items` does the other. By default these are horizontal and vertical respectively. If you’ve set it to flex-direction column, they will be reversed.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 29, 2018, 7:06am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/4 "2018-10-29T07:06:09Z")

</div>

this is the [link](http://salvatoresaia.com/euonymus/)

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 29, 2018, 8:06am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/5 "2018-10-29T08:06:54Z")

</div>

I have added a link to the github repository and inserted 2 issues requesting help, here is the [link](http://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/2)

i had a look at flexbox on css-tricks justify-content is a parent property so im failing to comprehend why it is not working.

The other issue i have is the lorem ipsum box nested inside the large image overlaps the right arrow when you shrink the browser, its not scaleable.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 29, 2018, 12:32pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/6 "2018-10-29T12:32:17Z")

</div>

I thin this could be reason my justify-content was not working, the entire width has been allocated to the box.

> <https://stackoverflow.com/questions/24052569/justify-content-property-isnt-working>

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 29, 2018, 8:36pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/7 "2018-10-29T20:36:34Z")

</div>

I still don’t see a link to your code. We can’t really help you if we can’t see what you’ve done. The “github” link just links to this thread.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 29, 2018, 8:53pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/8 "2018-10-29T20:53:54Z")

</div>

ok lets try again:)

> **[salv236/euonymus](https://github.com/salv236/euonymus)**
>
> Contribute to salv236/euonymus development by creating an account on GitHub.

  
[http://salvatoresaia.com/euonymus/](http://salvatoresaia.com/euonymus/)

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 29, 2018, 9:23pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/9 "2018-10-29T21:23:47Z")

</div>

the challenge i am now faced with is located just after the small images 48x by 48x , what i am struggling is the border bottom just underneath the 2 subheadings, i can’t figure out how to inserted a gap in between.

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 30, 2018, 2:25am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/10 "2018-10-30T02:25:39Z")

</div>

Sorry, I only see a readme file in that repo. We can’t help you if we can’t see your code.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 30, 2018, 6:02am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/11 "2018-10-30T06:02:30Z")

</div>

Hi Kevin,

This is probable because in GitHub you are on the master branch, if you switch to either development or euonymus-test you should see the code.

On the actual webhost if you perform an inspect element you should be able to see the code.

Best Regards

Savatore

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 30, 2018, 6:33pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/12 "2018-10-30T18:33:09Z")

</div>

Yes, I know how to inspect and element, but when you’re asking people for help, it’s polite to make it as easy as possible for them. Please tell me which branch you are working off of and I’ll see if I can give it a look when I get home.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 30, 2018, 7:33pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/13 "2018-10-30T19:33:04Z")

</div>

@kevinSmith

You asked me for the link to the code, if you asked me to share the code i would have happily done so, but i will bear this in mind in future. You can select either the development or euonymus-test branch they both mirror the same code. I also raised an issue on GitHub

\<span class=“message-first”\> Welcome Message Here \</span\>

\<span class=“message-2nd message–center”\> Latest Project Work \</span\>

.message–center{  
margin-left: 27em;  
}

.message-2nd {  
margin-left: 0;  
}

.message-first,  
.message-2nd {  
font-size: 1.3em;  
font-weight: 100;  
display: inline-block;  
border-bottom: 2px solid #e6e6e6;  
padding-bottom: 1.2em;  
width: 47.5%;  
}

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 30, 2018, 10:44pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/14 "2018-10-30T22:44:03Z")

</div>

You just need to make it as easy as possible for the people to help you. A link to a git hub repo is OK, but you have to let people know what branch. I’m not sure why anyone would want two identical branches, but OK. A link to your code and a description of where the problem is is often sufficient.

If I understand you, you want to control the space between the words “Welcome Message Here” and the line below it? That is controlled in your _message.css_:

```auto
.message-first,
.message-2nd {
    font-size: 1.3em;
    font-weight: 100;
    display: inline-block;
    border-bottom: 2px solid #e6e6e6;
    padding-bottom: 1.2em;
    width: 47.5%;
}

```

The line:

```auto
    padding-bottom: 1.2em;

```

You are using the border for the line (in the line above) and here you are setting the padding. The padding is the space outside the content, but inside the border. (And the margin is outside the border.) `1.2em` is the distance of 1.2 widths of the letter “m” in whatever font/size you are using. There are other units, but this works. If you want the padding between the subheadings and the line to increase, increase that number.

I would also suggest wrapping those subheadings and the two arrows in their own `div`. This creates some nice possibilities for organization, but also then you can apply the border to the `div` and have a continuous line. It’s up to you.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [October 31, 2018, 6:51am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/15 "2018-10-31T06:51:46Z")

</div>

Hi Kevin,

Thank you for your reply, the reason why i have 2 branches and speaking to a previous developer the way they work is they have a developer branch which is treated as the master and child branches hanging off the development one. When their developers was woking on their part they would push their code to their independent branches, once the senior developer was happy they would all deploy onto development. Once the Project leader or requestor would be satisfied it would be deployed onto the master.

Going back to the original situation, the goal is to have a gap in the line between welcome message here and latest project work. The small blue arrows have been placed in a div, for the 2 subheadings as they would be inline i thought it would be more appropriate for them to be placed in a span. Although maybe semantically this is incorrect and maybe they both should be h3’s and style them as inline block. How would you handle this? I have attached a screenshot of the result of the border-bottom.

 ![21%20AM](https://global.discourse-cdn.com/freecodecamp/original/3X/1/a/1a7196254aeafaa0c2159102b4eb913420b60bc4.png)

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [October 31, 2018, 11:10pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/16 "2018-10-31T23:10:28Z")

</div>

> the reason why i have 2 branches and speaking to a previous developer…

I see three branches, but OK. Yes, I understand that workflow, it’s just that traditionally you would be doing this work on one branch. But OK.

> Going back to the original situation, the goal is to have a gap in the line between welcome message here and latest project work.

I’m confused because you _do_ have a gap.

 ![show](https://global.discourse-cdn.com/freecodecamp/original/3X/7/6/76d79d8f573320b6b0bc654bc2061bd5ce9cd697.png)

Are you saying you want the gap to match what they have at the site? Is this a clone project?

Assuming that is the case…

The problem I see is that you are “connecting” the lines to the text above. But actually they are related to what’s below. Notice that the line starts and stops _exactly_ at the edge of the images. And also (different from your code) the image fill the entire width of that column - notice its relationship to the text.

So, I imagine two outer columns. These outer columns could also contain the “Welcome…” and “Latest”. Then you have you can have a line going the full width of the column, and have a horizontal padding of 0 and a margin to create the separation. Then within each of those outer columns you would have two inner columns, with the no margin on the outer edge and the pic taking the full width of that inner column.

Alternatively, you could have 4 columns and use padding and margin - between 1 and 2 and between 3 and 4 there would padding but no margin. And then between 2 and 3 it would be the opposite. This would get the desired effect on the lines.

> The small blue arrows have been placed in a div, for the 2 subheadings as they would be inline i thought it would be more appropriate for them to be placed in a span.

Sure. `span` is fine. Forgive me, I mostly work in React Native now so it’s easy to forget all these HTML elements. I’d also like to see more semantic HTML like `section`, 'header`, `article`, etc. You have some up above but this is clearly a case for a `section` wrapper here.

> Although maybe semantically this is incorrect and maybe they both should be h3’s and style them as inline block.

Sure, to me the most important question is _What is it?_ There should be an informational hierarchy. Your `h1` should be the title, `h2` for major section headers, `h3` for sub sections, etc. The web search engines look for these things to judge what’s in your page. If you need to change some CSS things like _display_ or _font-size_ or _color_ or whatever - that’s cool. As long as there is a structural hierarchy and hopefully a visual hierarchy.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [November 1, 2018, 3:36pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/17 "2018-11-01T15:36:45Z")

</div>

Hi Kevin,

I probably had an issue in identifying the boxes for the welcome and latest sections, they should have maybe been treated as 2 separate boxes.

The goal is to as best as possible mirror whats in the mockup, i made another attempt to review the semantics, i have modified the code and re-assessed the css i have an issue with the 2nd block to sit parallel with the 1st both blocks have a wrapper set to 50% i attempted to reduce to 45% this did not seem to do the trick, below is an update to the HTML & CSS

HTML

```
            <div class="welcome-message">
                <section class="welcome-message__container">
                  <h3 class="welcome-message__heading">Welcome Message Here</h3>
                <div class="welcome-message__wrapper">
                  <article class="welcome-message__article">
                      <figure> 
                          <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                      </figure>
                    <h4 class="welcome-message__subheading"> What We Do </h4>
                    <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                    <a class="welcome-message__link" href="#"> Read More <span> &raquo;</span> </a>
                  </article>
                  <article class="welcome-message__article">
                    <figure> 
                        <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                    </figure>
                    <h4 class="welcome-message__subheading"> What We Do </h4>
                    <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                    <a class="welcome-message__link" href="#"> Read More <span> &raquo;</span> </a>
                    </article>
                    <article class="welcome-message__article">
                            <h3 class="welcome-message__headingteam"> MEET OUR TEAM</h3>
                        </article>
                        <article class="welcome-message__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                                <h3 class="welcome-message__subheading"> PERSONS NAME </h3>
                                <h4 class="welcome-message__jobtitle"> Managing Director.</h4>
                                <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                                <a class="welcome-message__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                            </article>
                        </div>      
                </section>
            </div> 

            <div class="latest">
                    <section class="latest-container">
                      <h3 class="latest__heading"> Latest Project Work </h3>
                    <div class="latest__wrapper">
                      <article class="latest__article">
                          <figure> 
                              <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                          </figure>
                        <h4 class="latest __subheading__ blue"> Indonctetus facilis</h4>
                        <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                        <a class="latest__link" href="#"> Read More <span> &raquo;</span> </a>
                      </article>
                      <article class="latest__article">
                        <figure> 
                            <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                        </figure>
                        <h4 class="latest __subheading__ blue"> Indonctetus facilis </h4>
                        <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                        <a class="latest__link" href="#"> Read More <span> &raquo;</span> </a>
                        </article>
                        <article class="latest__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                             <h3 class="latest __heading__ person"> PERSONS NAME </h3>
                            <h4 class="latest-heading__jobtitle"> Managing Director.</h4>
                            <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                            <a class="latest__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                        </article>
                        <article class="latest__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                            <h3 class="latest __heading__ person"> PERSONS NAME </h3>
                            <h4 class="latest-heading__jobtitle"> Managing Director.</h4>
                            <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                            <a class="latest__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                        </article>
                    </div>
                    </section>
            </div> 

```

CSS

.welcome-message {  
width: 50%;  
}

.welcome-message\_\_heading {  
font-size: 1.3em;  
font-weight: 100;  
border-bottom: 2px solid #e6e6e6;  
padding-bottom: 1.2em;  
width: 100%;  
}

.welcome-message\_\_wrapper {  
display: flex;  
flex-wrap: wrap;  
}

.welcome-message\_\_article {  
outline: 1px dotted red;  
flex-basis: 50%;  
}

.welcome-message\_\_headingteam {  
font-size: 3em;  
font-weight: 100;  
}

.welcome-message\_\_article {  
flex-basis: 50%;  
}

.welcome-message\_\_subheading {  
font-size: 1.3em;  
font-weight: 100;  
color: #333;  
}

.welcome-message\_\_jobtitle {  
font-size: 0.9em;  
color: #979797;  
}

.welcome-message\_\_paragraph {  
font-size: 1.08em;  
line-height: 1.2em;  
color: #666;  
}

.welcome-message\_\_link {  
color: #2aa2d4;  
text-decoration: none;  
}

.latest {  
width: 50%;  
}

.latest\_\_heading {  
font-size: 1.3em;  
font-weight: 100;  
border-bottom: 2px solid #e6e6e6;  
padding-bottom: 1.2em;  
width: 100%;  
}

.latest\_\_wrapper {  
display: flex;  
flex-wrap: wrap;  
}

.latest\_\_article {  
outline: 1px dotted red;  
flex-basis: 50%;  
}

.latest-message\_\_heading {  
font-size: 1.3em;  
font-weight: 100;  
border-bottom: 2px solid #e6e6e6;  
padding-bottom: 1.2em;  
width: 100%;  
}

.latest-heading\_\_jobtitle {  
font-size: 0.9em;  
color: #979797;  
}

.latest\_\_heading\_\_person {  
font-size: 1.3em;  
font-weight: 100;  
color: #333;  
}

.latest\_\_subheading\_\_blue {  
font-size: 1.3em;  
font-weight: 100;  
color: #2aa2d4;  
}

.latest\_\_paragraph {  
font-size: 1.08em;  
line-height: 1.2em;  
color: #666;  
}

.latest\_\_link {  
color: #2aa2d4;  
text-decoration: none;  
}

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [November 2, 2018, 2:41am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/18 "2018-11-02T02:41:31Z")

</div>

I think you’re trying to do too much, too fast. When you’re building a boat, you lay the keel first. You save painting the cupboards for the end.

I like to work on the basic structure first. Here is a [pen](https://codepen.io/kevinsmithwebdev/pen/MzgjXw) showing how I would lay out the basic structure of that section. There are many ways to do it, but this is the one that comes to mind.

---

<div class="post-metadata">

**Author:** ![salv236](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/salv236/32/102024_2.png) [@salv236](https://forum.freecodecamp.org/u/salv236)\
**Post date:** [November 2, 2018, 10:36am UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/19 "2018-11-02T10:36:52Z")

</div>

Hi Kevin,

Wow, thank you for that, you make it look so easy, i have been battling for 2 days trying to figure this out 😀

Now the other dilema i have, is making the content flexible the top half of the website seems to fully flexible however on the portion welcome and latest its flexible up to a certain viewport size then it breaks, currently i possess little knowledge/experience on layouts so im now looking for resources online to view/read so i can see if i can apply. Will probably need further assitance from you as i am ensure i will encounter further difficulties and late nights 😁

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [November 2, 2018, 11:18pm UTC](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657/20 "2018-11-02T23:18:15Z")

</div>

Yes, that behaves very oddly as the screen size narrows. Maybe it means that they aren’t thinking of those as two separate columns. Actually if you use Chrome devtools you can confirm this.

I would recommend the FCC section on CSS (as well as all the others).

[Next page](https://forum.freecodecamp.org/t/euonmymus-practise-justify-content-not-working/236657.md?page=2)