CODEWITHSUNDEEP
htmlcss
Mitrixsen
Mitrixsen

Reputation: 323

Text displaying outside a div

I've created a section that has a background image and added a div to it which has a background image as well (the div is rather a medium-sized arrow where I wanted to put text). However, whenever I put text inside the div, it displays outside of it and not inside, any ideas on how to fix this? Thanks in advance :)

Screenshot of it enter image description here

*,*::before,*::after {box-sizing: border-box;}

* {
    padding: 0;
    margin: 0;
}

body {
    background-image: url("../images/bg.png");
    background-size: 100%;
    font-size: 100%;
    font-family: "Roboto",sans-serif;
    color: white;
    
}


img {
    max-width: 100%;
    height: auto;
}




.podnadpis {
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    margin-top: 2em;
}


.paralax-1, .paralax-2, .paralax-3, .paralax-4 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
    width: 100%;
}

.paralax-1 {
    background-image: url('../paralax-img/gold_hoarder.jpg');
}

.paralax-2 {
    background-image: url('../paralax-img/flameheart.jpg');
}

.paralax-3 {
    background-image: url('../paralax-img/cursed-sails.jpg');
}

.paralax-4 {
    background-image: url('../paralax-img/sopka.jpg');
}

.ciara {
    background-image: url('../paralax-img/ciara.png');
    background-size: contain;
    height: 15px;
    width: 100%;

}

.left-block {
    background-image: url('../paralax-img/content-block.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 900px;
    width: 35%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vlastna responzivna stranka</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
  
    <h2 class="podnadpis">Parallax efekt</h2>

    
    <section class="paralax-1">
        <div class="left-block">
            <h1>I AM OUTSIDE!</h1>
        </div>
    </section>
    <section class="ciara"></section>
    <section class="paralax-2"></section>
    <section class="ciara"></section>
    <section class="paralax-3"></section>
    <section class="ciara"></section>
    <section class="paralax-4"></section>
    
    

    <script src="javascript/jquery.js"></script>
    <script src="javascript/jquery.parallax.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

Upvotes: 1

Views: 348

Answers (1)

en0ndev
en0ndev

Reputation: 692

You can try this.

.left-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

Upvotes: 1

Related Questions