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

Posted by Matthew Clark
Matthew Clark
7,255 Points

Spacing issue

Hi-

I am having an issue with the spacing between the paper trade and do deals. How do I get them closer together? Below is my html and css.

HTML <section class="head"> <H1 class="company">Paper Trade</H1> <p class="slogan">Do Deals</p> </section>

CSS .company { font-family: 'Poiret One', cursive; font-size: 50px; color: rgb(0,150,255); font-weight: 900px; margin: 21px; background: green; } .slogan { font-family: 'Poiret One', cursive; margin-right: 21px; margin-bottom: 16px; margin-left: 21px; margin-top: 5px; padding: none; border: none; }

Also, how do I get the green background to spread between the two items and across the whole top?

Thanks,

3 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Mathew,

I advise you to use chromes inspect element as much as you can. In this case you can see that the h1 element has a 21 margin all around. By removing that you can put the paragraph closer.

To make the background extend to the whole top, I would incase the elements inside a div and style it accordingly:

body{
    margin:0;
}

.header{

    background: green; 
}

.company { 
    font-family: 'Poiret One', cursive; 
    font-size: 50px; 
    color: rgb(0,150,255); 
    font-weight: 900; 
    margin:0;
    padding: 21px;

}

.slogan { 
    font-family: 'Poiret One', cursive; 
    margin-right: 21px; 
    padding-bottom: 16px; 
    margin-left: 21px; 
    margin-top: 5px; 
    border: none; 
}

    <div class='header'>
        <h1 class="company">Paper Trade</h1>
        <p class="slogan">Do Deals</p>
    </div>
Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

For the background color, try enclosing them into a div and give that div a green background.

To reduce the space between them, reduce the bottom margin/padding of .company and the top margin/padding for .slogan.

Edit: Hugo beat me to the punch.

Saad Ahmed
Saad Ahmed
7,090 Points
Saad Ahmed
Saad Ahmed
7,090 Points

Matt.F and Hugo both #beatMeToThePunch... lol