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!

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

HTML

John Lukacs
John Lukacs
26,793 Points
Posted by John Lukacs
John Lukacs
26,793 Points

Anchor 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
Ezekiel dela Peña
6,231 Points
Ezekiel dela Peña
Ezekiel dela Peña
6,231 Points

did you try? 

nav ul li {
    display: inline-block;
}
John Lukacs
John Lukacs
26,793 Points
John Lukacs
John Lukacs
26,793 Points

I 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
John Lukacs
26,793 Points
John Lukacs
John Lukacs
26,793 Points

I can't get the margin right to work on the logo. Any idea's? How do I post the code

John Lukacs
John Lukacs
26,793 Points
John Lukacs
John Lukacs
26,793 Points

I do not see it where is it. I am using dream weaver

Ezekiel dela Peña
Ezekiel dela Peña
6,231 Points
Ezekiel dela Peña
Ezekiel dela Peña
6,231 Points

to 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
John Lukacs
26,793 Points
John Lukacs
John Lukacs
26,793 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
Ezekiel dela Peña
6,231 Points
Ezekiel dela Peña
Ezekiel dela Peña
6,231 Points

if you wanna put it to the right part of the page. It should work with this.

.main-nav {
     position: absolute;
     right: 5px;
}
John Lukacs
John Lukacs
26,793 Points
John Lukacs
John Lukacs
26,793 Points

It 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
Ezekiel dela Peña
6,231 Points
Ezekiel dela Peña
Ezekiel dela Peña
6,231 Points

I see. Are you doing some kind of nav-bar? Then I suggest you should use some flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/