Display: inline experimenting

Hey guys, see a snippet of my html and css code below. I know how to make it look nice using “display: inline-block” but I decided to experiment more on “display: inline” just to get a full understanding. So that being said I thought my h1 and nav with “display: inline” should appear on the same line since they are both child elements inside header. But they behave as if I assigned “display: block” to both of them. Please help!

<!--html code-->


<header>
    <h1>CONSTANTIN-MUSIC</h1>
    <nav  class="navigation">
        <ul class="button">
            <li><b>Home</b></li>
            <li>About</li>
            <li>Gallery</li>
            <li>Video</li>
            <li>Contact</li>
        </ul>
    </nav>
</header>
<!--CSS code-->

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* navigation bar */

header {
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: black;
  height: 50px;
  min-width: 800px;
}

h1 {
  /* height: 50px; */
  display: inline;
  padding: 15px 0;
  background-color: blue;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
  letter-spacing: 4px;
}

.navigation {
  display: inline;
  /* height: 50px; */
  background-color: rgb(112, 84, 84);
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  margin-right: 30px;
  padding: 17px 0;
}

.navigation li {
  display: inline;
  margin-left: 10px;
}

Screen Shot 2020-04-24 at 1.19.11 PM|690x35

Hi there, welcome to the forums!

The issue is your <ul> element.

If we use the dev tools, we can see that the <ul> element is taking up the full width of the screen:

If you change the display property of your <ul> element, it should work how you wanted. :slight_smile:

1 Like

Hello and welcome to the community,

You’re over-complicating things a bit, but for the sake of experimentation:

.navigation ul {
  display: inline;
}

The unordered list should also be displayed inline.

If you decide to use inline for all elements, then add this and it will work.

But you can definitely find a better way :wink:


@thepitycoder your post was hidden under the reply area, I should’ve checked :upside_down_face:

1 Like

Haha, that’s happened to me before. :smiley:

I think your explanation is better than mine anyway. :slight_smile:

Thanks guys! You solved my problem!

1 Like

Now that I’m done with “display: inline” I decided to place everything where I wanted initially. With my high level of confidence and some good time on the web and this forum I still could not place h1 “Constantin-Music” to the center of the screen without affecting the nav bar on the right. Margin: 0 auto is not doing anything. Please see my code below:

header>
    <h1>CONSTANTIN-MUSIC</h1>
    <nav  class="navigation">
        <ul class="button">
            <li><a href="index.html"><b>Home</b></a></li>
            <li><a href="./html/about.html">About</a></li>
            <li><a href="./html/gallery.html">Gallery</a></li>
            <li><a href="./html/video.html">Video</a></li>
            <li><a href="./html/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>
header {
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: black;
  height: 50px;
  min-width: 800px;
}

h1 {
  height: 50px;
  display: inline-block;
  margin: 0 auto;
  padding: 15px 0;
  background-color: blue;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
  letter-spacing: 4px;
}

.navigation {
  height: 50px;
  float: right;
  background-color: rgb(112, 84, 84);
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  margin-right: 30px;
  padding: 17px 0;
}


.navigation li {
  display: inline;
  margin-left: 10px;
}

.navigation a {
  text-decoration: none;
  color: white;
}

.button a:hover {
  color: rgba(0, 255, 98, 0.808);
}