Text Div and Image Div side by side in Parallax website - html

Question

I'm making a parallax website and at the top of the page I want the left to be text and the right to be an image. At this moment in time the image only shows up under the text div.
.section {
width: 100%;
text-align: center;
padding: 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<img src="resources/img/scene1image.png" alt="scene1image.png">
</section>

Answer 1

If you want your text to be on the left and image on the right, you need to create one div containing the text and one div containing the image. Then you can put both of it into 1 div to contain both of them (nested divs) and set inline-block to both the inner divs.
You can then set both the inner divs to 50% , so they make up 100% of the width. But since you have a padding (left and right) of 80px, use calc(50%-80px) so that you create a width of 50% - 8px.
Try this:
* {
padding: 0;
margin: 0;
}
.section {
width: 100%;
text-align: center;
padding: 50px 0 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img {
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img img {
width: 100%;
height: 80vh;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<div class="sub-section-img">
<img src="http://lorempixel.com/200/200/" alt="scene1image.png">
</div>
</section>
Edit:
1) Added a new CSS rule with vh. Now, you can set the image height to the exact height. You got to do trial and error to suit your exact height desired, just increase / decrease the value in height: 80vh.
2) Removed the padding on the right since you want the image to the edge. Changed the values in .section css.
3) If you want absolutely no gap to right of the image, then add the CSS reset (removal of the default padding and margin).
* {
padding: 0;
margin: 0;
}