Question: Question: How to make it like ul and li in the same line. Can anyone help me with this problem. Thanks a lot.

```
Product product product product
Drink  Drink  Drink  Drink
Food  Food  Food  Food

```

CSS:

```
   #footer{
        display:inline;
    }

    #footer .footer_container{
        display:inline;
        border:1px solid red;
    }

```

HTML:

```
   <div id="footer">

         <div class="footer_container">

            <section>
                    <h1>Product</h1>
                    <ul>
                        <li>Product</li>
                        <li>Product</li>
                        <li>Product</li>
                        <a href="google.com"><li>Product</li></a>
                    </ul>
              </section>

              <section>
                    <h1>Drinks</h1>
                    <ul>
                        <li>Drinks</li>
                        <li>Drinks</li>
                        <li>Drinks</li>
                        <a href="google.com"><li>Product</li></a>
                    </ul>
              </section>

              <section>
                    <h1>Food</h1>
                    <ul>
                        <li>Food</li>
                        <li>Food</li>
                        <li>Food</li>
                        <a href="google.com"><li>Product</li></a>
                    </ul>
              </section>
         <div>
     </div>

```

Answer: 
> 
> 
> ```
> table.show-my-request-table > td:first-child {
>     background-color: #ff0000; 
> }
> 
> ```
> 
> 

This selector tries to target a `td` that is a *direct* child of the `table` element. As your own code shows:

> 
> 
> ```
> <table class="show-my-request-table center">
>     <!-- snip -->
>     <tr  >
>         <td class="show-my-request-table">
> 
> ```
> 
> 

There is (and has to be) a `tr` element between them. But that's not all: the HTML parser will also silently insert a `tbody` element as a parent for the `tr` (unless you have explicitly included a `<thead>` or `<tbody>` tag). The `<tbody>` tag is optional in HTML, but the *element* is not, so the parser will simply add the element if the tag is missing.

The solution is to use the [*descendant* selector](https://www.w3.org/TR/selectors-3/#descendant-combinators):

```css
table.show-my-request-table td:first-child {
    background-color: #ff0000; 
}

```

A keen observer will notice that the `>` combinator has been replaced by a  (space) combinator.
You just need to target the element inside the table 

Try this 

```
table.show-my-request-table tr td:first-child {
    background-color: #ff0000; 
}

```

Here's a code pen <http://codepen.io/anon/pen/LkrmqK>

Cheers and happy coding.