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 Marco Caramaschi
Marco Caramaschi
Courses Plus Student 7,812 Points

portfolio styling

Hi,I'm starting the first page of my portfolio,but I have an issue that apparently I am not able to solve.

I have put a border around the divs just to help me out with margins and padding, but when I try to comment out the border from the "main.div", it destroy all the layout of the page.with the header that falls like 60px down. Do you know what it can be that I do wrong? This is the website: www.marcocaramaschi.com Any other thought or suggestions about the layout are more than welcome! Thank you so much for your help!

Marco

1 Answer

Daniel Butler
Daniel Butler
3,648 Points

Hi Marco,

I have taken a quick look at your site, it seems when you remove your border from your .main the margin-top: 110px comes into play from the top of your container ID.

if you apply a padding top of 110px to your .main and remove the margin-top: 110px; from your #container you will achieve the same visual appearance, however you will now be able to remove your borders without breaking your design.

as follows

.main {
    text-align: center;
    margin: 0;
    padding-top: 110px;
/*  border:1px solid red; */
    background-image: url("../wallpapers.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 596px;
}

#container {
    border:1px solid red;
    background-color: rgba(173, 70, 32,0.4);
}

I'm still learning myself so this might not be the correct way to fix this issue, however from what i can see it does have the desired effect. happy coding :)