Question: I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.

here is my code:

CSS:

```css
.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
img {
    padding: 0;
}
.list>a {
    display: table-cell;
    border-left:1px #47c9af solid;
    text-align: center;
    color:#47c9af;
    height:30px;
    text-decoration: none;
}
.container {
    background-color: white;
    color:#47c9af;
    height:100%;
    font-family: WYekan !important;
}

```

HTML: 

```
<div class="container">
    <ul class="list">
        <a href='#'><li style='float:left;'><img src="header2.png"></li></a>
        <a href=""><li></li></a>
        <a href='#'><li><h1 >Header Of My Blog </h1></li></a>
        <a href='#'><li><p>SubHeader</p></li></a>
        <a href='#'><li><h3></h3></li></a>
    </ul>
</div>

```

The result is something like this:

![enter image description here](https://i.stack.imgur.com/rrALE.png)

![enter image description here](https://i.stack.imgur.com/4unGT.png)

As you can see logo is not in order with other elements, what should i do?

Thanks.

Answer: 
### Fixing the Alignment

To fix the alignment you simply need to introduce the `vertical-align` property to align everything to the top:

```css
.list {
    ...
    vertical-align: top;
}

```

### Making your HTML Valid

A problem with your markup is that `ul` elements must only contain `li` children. Your current `ul` element has `a` children which have `li` elements inside them - this is invalid. Wrap your `a` elements within the `li` elements instead:

```
<ul>
    <li>
        <a></a>
    <li>
</ul>

```

### Making your HTML Semantic

You need to ask yourself some questions about your current markup:

1. What is this a list of? Why are you using the `ul` element instead of the `header` element?
2. Why are you using a `p` element as a "SubHeader"?
You can define your `.list>a` and `img` tag `vertical-align:top;`

```
.list>a, img{
vertical-align:top;
}

```