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 frederik christensen
frederik christensen
5,740 Points

I am playing around with a border but when i set the width it changes the whole look of my page help

Hello. So i am doing a little website for my social links. I would like a border around everything i put on there so i created a div with a id But when i put a border and change the width it changes the whole look of the website. If anyone could help me it would be appriciated

Code: Html: <div id="page"> <img class="pfp" src="../../Downloads/MagicTouchAvatar.png" alt="Profile Picture"> <h1 class="center">MagicTouch</h1> <h2 class="center">All of my link's:</h2> <ul class="links"> <li><a href="#">Facebook</a></li> <li><a href="#">Discord</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul> </div>

CSS; .pfp { width: 200px; height: 200px; border: solid 3px black; border-radius: 50%; display: block; margin: 10px auto 10px auto; }

.center { text-align: center; }

.links { text-align: center; }

.links > li { border-left: solid 3px blue; background-color: grey; margin: 10px auto 10px auto; list-style: none; padding: 10px; font-size: 18px; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; border-radius: 7px; width: 10%;

}

.links > li > a { color: black; text-decoration: none; }

.links > li > a:hover { color: white; }

page {

border: solid red 4px;
width: 20%;
margin: auto;
border-radius: 2%;

}

frederik christensen
frederik christensen
5,740 Points

https://gyazo.com/1de9bd05c65e7e0e0d2c4ba30ae5333b This is what it looks like now

5 Answers

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Hi Frederik,

So you are currently adding a border to the page div, which contains all of the other elements of your page. That is why everything ends up inside of the border. What if you added the border to .links instead?

Lee

frederik christensen
frederik christensen
5,740 Points
frederik christensen
frederik christensen
5,740 Points

All of the stuff needs to be inside the border. So if i set the code to .links it will only give my links a border around.

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Ah, I misunderstood the question.

Can you be more specific about what you mean by "the whole look of the website"? What did it look like before? How did it change? How would you like it to look vs how it looks in the image you have included? In other words, can you be more specific about the problem that you would like to fix.

Also, do you happen to have a Github repo for this? Your code snippets aren't correctly posted which makes them difficult to read. Check out this article for tips on posting code snippets to the forum: https://teamtreehouse.com/community/posting-code-to-the-forum

frederik christensen
frederik christensen
5,740 Points
frederik christensen
frederik christensen
5,740 Points

It looks like this now: https://gyazo.com/0f9961f358bd66154543b1f0ac5a22e9 I want the links with the border be in the middle

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Links.css" type="text/css">
<meta charset="utf-8">
<title>MagicTouch, Links</title>
</head>

<body>
<div id="page">
<img class="pfp" src="../../Downloads/MagicTouchAvatar.png" alt="Profile Picture">
<h1 class="center">MagicTouch</h1>
<h2 class="center">All of my link's:</h2>
<ul class="links">
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Discord</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
</ul>
</div>
</body>
</html>

body  {
    background-color: black;
}



.pfp {
    width: 200px;
    height: 200px;
    border: solid 3px black;
    border-radius: 50%;
    display: block;
    margin: 10px auto 10px auto;
}

.center {
    text-align: center;
}

.links {
    text-align: center;
}

.links > li {
    border-left: solid 3px blue;
    background-color: grey;
    margin: 10px auto 10px auto;
    list-style: none;
    padding: 10px;
    font-size: 18px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    border-radius: 7px;
    width: 10%;

}

.links > li > a {
    color: black;
    text-decoration: none;
}

.links > li > a:hover {
    color: white;
}

#page {
    border: solid red 4px;
    width: 20%;
    margin: auto;
    border-radius: 2%;
    background-color: powderblue; 
}
Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Looks like your ul element is inheriting left padding from the user agent stylesheet. You can see this if you open the developer tools and inspect the element. Just set padding-left for the ul element to 0 and you should be all good.