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 trialJohn Lukacs
26,806 PointsAnchor links bug. Its turning into a staircase
My nav is not working. The four links I have are showing like this link 1 link 2 link 3 link 4 what is up with this
6 Answers
Ezekiel dela Peña
6,231 Pointsdid you try?
nav ul li {
display: inline-block;
}
John Lukacs
26,806 PointsI coulden't get it to work float method so I went to the display:block method. And change the header into a table.
John Lukacs
26,806 PointsI can't get the margin right to work on the logo. Any idea's? How do I post the code
Ezekiel dela Peña
6,231 Pointsclick the Markdown Cheatsheet.
John Lukacs
26,806 PointsI do not see it where is it. I am using dream weaver
Ezekiel dela Peña
6,231 Pointsto post the code here on the forums.
Code Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.
```html
<p>This is code!</p>
```
John Lukacs
26,806 Points@charset "UTF-8";
/* CSS Document */
.main-logo {background-color:#86A84E;}
.main-nav {background-color:#43090A;}
body {background-color:#E8DCDC;}
.main-header {background-color:#000000;}
/**************
main-nav
***/
body{padding:0; margin:0;}
.main-nav li {
list-style:none;
font-family: 'Playfair Display', serif;
}
.main-header{
padding: 20px;
}
.main-logo {
margin-top: 0;
margin-bottom:0;
}
.main-logo a,
.main-nav a {
display:block;
color:white;
text-decoration:none;
text-align: center;
padding: 5px 15px;
border-radius: 5px;
font-family: 'Playfair Display', serif;
font-weight: bold 700 ;
font-style:italic;
}
footer {
text-align:center;
color:white;
padding-bottom:0;
padding-top:0;
font-family: 'Playfair Display', serif;
}
.photo {
width: 100%;
height:100%;
margin-top: 10px;
margin-bottom:10px;
border:solid;
padding:5px;
}
@media(min-width: 768px){
.main-logo,
.main-nav li,
.main-nav,
.main-nav a,
.main-logo a{
display:inline-block;
}
.main-logo {
margin-right:50px;
}
.main-nav li a{
margin: 0 15px 0 15px;
border-radius: 10px;
}
header{
display:table;
width:100%;
min-height: 170px;
}
.main-logo,
main-nav{
display:table-cell;
vertical-align: middle;
width:120px
}
.main-logo,
.main-nav li,
.main-nac li a
{padding: 10px 20px;
border-radius: 5px;
}
.main-logo{
margin-right: 150px;
}
.main-nav{
float:right;
margin-right: 200px;
}
/**margins dont work I had to float the thing to the right
}
Ezekiel dela Peña
6,231 Pointsif you wanna put it to the right part of the page. It should work with this.
.main-nav {
position: absolute;
right: 5px;
}
John Lukacs
26,806 PointsIt won't except a margin or a position Its displayed inlineblock. I don't know why I can't minipulate it
Ezekiel dela Peña
6,231 PointsI see. Are you doing some kind of nav-bar? Then I suggest you should use some flexbox.
Ezekiel dela Peña
6,231 PointsEzekiel dela Peña
6,231 PointsCan you post your code here?