Css inline display not working

HTML-CSS
1

Hi, why h1 “my Page” is not inlined with nav list here is the html code:

<DOCTYPE html>
    <html>
        <head>
            <title>My Website 1.0</title>
            <link rel="stylesheet" href="main.css">
        </head>
        <body>
            <header>
                <h1>My Page</h1>
            <nav>
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Links</a></li>
                </ul>
            </nav>
            </header>
            <div class="row">
                <div class="col">col1</div>
                <div class="col">col2</div>
                <div class="col">col3</div>
            </div>
            <footer>©2018</footer>
        </body>
    </html>

and here is the css code:

body {
    margin: 0px;
}

header {
    background: #999;
    margin: 0px;
}

header h1 {
    margin: 0px;
    display: inline;
}

nav ul {
    display: inline;
}

nav ul li {
    display: inline-block;
    background: list-style-type: none;
    padding: 5px 15px;
    margin: 0px;
}

a {
    color: white;
}
2

The <nav> is not inline, you’ve put display:inline on the <ul> inside the nav

1 Like
3

Thank you Dan, I put a comma between nav and ul and it works, but I am following a video tutorial on youtube and used the same code in the video and it worked in the video see the picture, why is that?!

New-Pictur-ConvertImage
New-Pictur-ConvertImage1366×768 102 KB

4

I would suspect that the code in the video is missing something, and that at least some of the coding part was recorded seperately to the live view of the site

1 Like
5

I see, I didn’t include the html code, ok so much for that, thank you very much for the help have a great day.

6

I’d also note that this isn’t a great tutorial, its old, doesn’t exactly teach best practise and even watching a little bit of it he’s not understanding how certain things work (for example the space between the nav elements that he can’t remove at one point is caused by him using inline-block, and using online on block elements is not normally very clever as it causes the same issue as inline block + you lose all the benefits of them being block elements)

1 Like
7

Well I struggle a lot in finding a beginner friendly tutorial, The internet is filled with coding tutorials but till now I couldn’t find a beginner tutorial that doesn’t throw you off suddenly, It is very frustrating.

1 Like