I need help with editing elements on my header in HTML

Hello, I am a beginner at coding so I’m going to need a lot of help in the future. (If I misuse the forum by posting too many questions, please let me know)

The issue that I have is that I have no idea why my logo won’t vertically align, even though I coded that(probably did it wrongly). And I need someone to tell me how do I make a list run horizontally. Thanks in advance! Here’s the code:
https://jsfiddle.net/brj2aumf/1/

Using positioning for this is a bad idea and will just make it more difficult to make the page responsive. But just to cover it anyway.

  1. Remove the default margin on the h1.
h1 {
 margin: 0;
}
  1. Vertically align the logo div.
#logo {
  color: white;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

Instead, I would suggest you remove all positioning from all elements and use flexbox.

#header {
  width: 100%;
  height: 50px;
  background-color: red;
  /* set to flex */
  display: flex;
  /* push logo and nav apart */
  justify-content: space-between;
  /* vertically align flex items */
  align-items: center;
}

#logo {
  color: white;
  padding-left: 10px;
}

#contents {
  color: white;
  padding-right: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
1 Like

Thanks! So in my future works, should I always avoid positioning and just use flex?

Positioning still has its uses, but they are fairly specific. For doing layout, in general, you don’t really want to use positioning. There are special cases like overlaying or overlapping elements, and intentionally taking elements out of normal document flow. Like for example the dropdown menu you see on the forum, you don’t want the menu to push other elements when the menu is expanded so it is absolutely positioned to not interact with other elements.

I’d highly suggest learning Flexbox, it’s super useful for doing layout.



1 Like