What is the correct way to create this margin?, Help with margins best practice Options

[JUI43555]

Hi,

In the screenshot below there is a 165px margin between the main heading and the left hand side (same on the right hand side) What is the best way to write that into my CSS? Is it with the use of margins? Padding for each individual element?

Don't want to add something in the wrong place this early in the build.

Cheers.

CODE

<section class="hero">
                    <div class="hero__content-intro">
                        <h1 class="hero__content-intro--heading">Typemaster keyboard</h1>
                        <p class="hero__content--p">Improve your productivity and gaming without breaking the bank. Upgrade to a high quality mechanical typing experience.</p>
                        <div class="hero__button">
                            <a role="button" href="#">Pre-order now</a>
                            <span>Release on 5/27</span>
                        </div>
                    </div>
                    <div class="hero__image">
                        <img src="images/desktop/image-keyboard.jpg" alt="Typemaster Keyboard - Midnight Grey" />
                    </div>
                </section>

[Christian J]

To me it looks like padding on div.hero__content-intro would be the simplest, that way you don't need to add left-margins to all its child elements. Other than that I don't think there is a right or wrong way.

[JUI43555]

To me it looks like padding on div.hero__content-intro would be the simplest, that way you don't need to add left-margins to all its child elements. Other than that I don't think there is a right or wrong way.

Thanks Christian i'll give it a go