How to position a block of text next to an image container-CodePudding

I'm having some trouble with adding paragraph texts to my webpage. I have a parallax image that I would like to place a heading and paragraph next to. When I try to do this, the text comes out in a thin straight line here's a picture of the problem. I've played around with inline blocks and relative:position but nothing seems to be working. Would be really grateful if someone could take a look at my code and tell me where I've gone wrong

<!DOCTYPE html>
<html>
    <head>
        <title>"Parallax Astro Girl"</title>
        <link rel="stylesheet" type="text/css" href="./styles.css"/>
        <meta name="author" content="AS">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    </head>
    <body>
        <div class="image-container">
            <canvas class="canvas" width="2198" height="2993" id="canvas"></canvas>
            <div class="loading-screen" id="loading">loading...</div>
            </div>
            <div class="text">
            <h1>Astro Girl</h1>
            </div>  
     <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis elit lectus. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec consequat sapien et nisl sodales tempor. In eu nunc sed mauris elementum congue. Praesent libero neque, mattis vitae posuere sed, accumsan vel est. Nunc eu pellentesque magna. Maecenas convallis eros orci, quis convallis justo posuere a. Nam vitae suscipit ipsum.</p>
     </div>
    </body>
    <script type="text/javascript" src="./tween.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</html>

html,
body {
    box-sizing: border-box;
    margin: 0;
    height: 100%;
    background: black;
    display: flex;
    font-family: sans-serif;
}
.text h1 {
    padding: 20px;
    color: white;
    font-size: 70px;
    position: relative;
    left: 350px;
    white-space: nowrap;
    top: -40px;

}
.paragraph {
    color: white;
    position: relative;
    top: 100px;
    width: 300px;
    height: 50px;
    font-size: 30px;
}

.image-container {
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    position: relative; 
    left: 200px;
    webkit-perspective: 1500px; 
    perspective: 1500px;
    
}

.canvas {
    width: auto;
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: auto;
}
.loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background:  black;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: visible;
    opacity: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 40px;
    transition: 0.25s ease all 0.75s;
    color: #999;
    transform: translateZ(50px);
}
.loading-screen.hidden {
    visibility: hidden;
    opacity: 0;
}

EDIT: I would like the page to look like this enter image description here

CodePudding user response：

I'm not sure what you want to achieve. Are you sure of needing the .paragraph class width (300px, currently) and height? Could you include an image of the expected result?

CodePudding user response：

You have used flex structure, and there are few childs of that flex container.

To fixing width for particular child in your case <div > you have to use min-width: 300px;.

It will assure 300px fix width for that particular <div>

Demo: JSFiddle

.paragraph {
    color: white;
    position: relative;
    top: 100px;
    min-width: 300px;
    height: 50px;
    font-size: 30px;
}