Question: So I have two images with captions under them. I want to be able to put them side by side. I've tried in css float: right; and display: inline-block; but I can't simply get it to work. Please and thank you. I'm new to coding.

```
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<figure id="crackers1">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>
</body>
</html>

```

Answer: 
`display: inline-block` should do the job. If the two images have different heights, you can add a vertical align.

```
<style>
figure {
    display: inline-block;
    vertical-align: top
}
</style>

```
Hi now used to this you just created one div in your image parent as like this 

```
figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}

```

```css
figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}
```

```html
<div class="imGSec">
<figure id="crackers1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8q3x_pFvnepIe7b7C_YeHbbHJe4n1KXKPIgldpccJY1hw3Z8z" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdNkStSLeNk_3eAN6MV7asaOQapylITCIxs1JDOEblIc8V4eqy" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>
```