The easiest way to do this is to use the "flex" styles provided by your template. These are handy shortcuts for creating FlexBox layouts - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In the example below, using your existing article, I do the following:

1. Edit the Youtube video in the Media Manager, and remove the uk-margin-top style.
2. Select the image, and remove the margin from it using the Remove Formatting button (easier than opening the Image Manager to do this simple task). We won't need this margin because of the flex box styling.
3. Click somewhere in the paragraph, and select Paragraph from the Format list to remove it, as we are already inside a DIV and don't need the additional paragraph.
4. Click on DIV in the Path at the bottom of the editor to select it, then open the Attributes dialog. In the Classes field, add the flex classes - uk-flex uk-flex-center uk-flex-wrap

The image looks a little stretched in the editor display, but you can see in the Preview that it displays perfectly, with both the image and video neatly centred and the same size.

[video]

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Can you change the color or show me how to permanently change the color of this line - http://prntscr.com/nwv9fk, from grey to black, so that it will stand out more. The grey is too light. I want it to be black from now forward, for the entire site.

This is best done with a css rule in your template stylesheet, eg:

hr {
    border-top: 1px solid black;
}

So, I just click on the code tab and change (type in the code) the html code here, http://prntscr.com/nxbfkn
I don't see "border-top" anywhere!!

No, you add need to add the code I provided to your template's custom.css file.