Image above headline, and colour changing

How do I make this change so that I can reduce the gap at the top of the image?

Is this the gap you’d like to reduce?

You can pull the image up closer to the element above it with some CSS like this:

#main {
margin-top: -50px;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, <strike>or create a child theme.</strike> Correction: you can’t use a child theme here since Ever After is already a child theme.

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

If CSS is new to you, here are some resources for learning more about it:

• CSS Basics
• Editing CSS

Also the white background I find too sharp, can I change this to a creamy colour?

Sure, by targeting the white elements with CSS you can change it to any colour you like. The guides I provided you with above should get you started.