What is the reason for it being shown vertically?

The content is showing up differently for me than it should. I've attempted to use line breaks (br tags) and compare the code, but it looks identical to the tutorial I am following. I'm puzzled as to why it's displaying differently when we are working on the same project. I even recreated the project to ensure I didn't miss anything. There are two columns, but the first column is displaying everything vertically. Even after adding more text, it continues to adjust vertically. Everything works as expected until I add padding: 0 19%; 0 to the top and bottom and 19% to the sides, at which point the display changes. I am using Microsoft Edge.

The HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

    <!-- boxicons link-->
    <link rel="stylesheet"
    href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

    <!-- remixicon link-->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="057760686c7d6c666a6b45362b312b35">[email protected]</a>/fonts/remixicon.css" rel="stylesheet">

    <!-- google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        <a href="#" class="logo">COC-STATS</a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clans</a></li>
            <li><a href="#">Town hall</a></li>
            <li><a href="#">Troops</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
        <div class="bx bx-menu" id="menu-icon"></div>
    </header>
    <section class="hero">
        <div class="hero-text">
            <h5>#2 Trending</h5>
            <h4>Lead Supercell</h4>
            <h1>GOBLINS</h1>
            <p>Join millions of players worldwide as you build your village, <br> raise a clan, and compete in epic Clan Wars!! </p>
            <a href="#">Compare</a>
            <a href="#" class="ctaa"><i class="ri-play-fill"></i>Watch Gameplay!</a>
        </div>
        <div class="hero-img">
            <img src="img-removebg.png" alt="">
        </div>
    </section>
    <script src="script.js"></script>
</body>
</html>

The CSS:

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

header{
    position: fixed;
    right:0;
    top:0;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 33px 9%;
    background: transparent;
}

.logo{
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

header ul{
    display: flex;
}

header ul li a{
    color: #fff;
    margin-left: 60px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all .55s ease;
}

header ul li a:hover{
    border-bottom: 2px solid white;
}

#menu-icon{
    color: #fff;
    font-size: 35px;
    z-index: 2;
    cursor: pointer;
    display: none;
}

.hero{
    height: 100%;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(245.59deg, #4d9559 0%, #38703d 28.53%, #133917 75.52%);
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    gap: 2rem;
}

section{
    padding: 0 19%;
}

Answer №1

To save others from having to copy and paste your code, I quickly created a codepen. It seems to be rendering correctly for me on Microsoft Edge.

Based on the name of your image at

<div class="hero-img">
    <img src="img-removebg.png" alt="">
</div>

it looks like you created the image yourself. My hunch is that your image might be wider than the original one, causing the text to appear distorted.

Consider trying a different image or zooming out to see if that resolves the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

React conditional statement within a map function embedded in a JSX element

Below is the function I have created to generate tabbed items: function ConstructTabs(props) { const tabs = props.tabs; const makeTabs = tabs.map((tab, index) => { <React.Fragment> <input className="input-tabs" id ...

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

Problem with backstretch script (using DIV element as background)

For my website, I am utilizing a fullscreen background with the help of backstretch. The code below works perfectly on one of my websites: <script> $.backstretch([ "images/1.jpg" , "images/2.jpg" , "images/3.jpg" ], {duration: 6000, ...

Full-width Dropdown Menu within a Container with a Maximum Width

Is it possible to make a dropdown menu within a navigation bar open to the full width of the page, even when the parent container has a maximum width of 500px? My attempt to use 100vw resulted in misaligned dropdown elements, and I cannot move the navbar ...

Web browser local storage

Looking to store the value of an input text box in local storage when a button is submitted <html> <body action="Servlet.do" > <input type="text" name="a"/> <button type="submit"></button> </body> </html> Any sug ...

Control the transparency of the initial parent div that includes an *ngFor loop

I want to add opacity only to the first div which contains an icon and a heading in another nested div. The second div should remain fully visible (opacity: 1). Here is the HTML structure: <div class="row clearfix"> <div class="col-lg-3 col- ...

What is the best way to align this horizontal list in the middle of a fixed div?

I have a UL element that contains 4 icons within a div using absolute positioning to align it to the bottom of the screen. This div is located within a fixed sidebar. To create a horizontal list, I applied display: inline to the list items. You can see t ...

Positioning Bug in FF/IE with Absolute Placement

It appears that Chrome is the only browser displaying my code correctly. While testing in Firefox and Internet Explorer, I have noticed that my position:absolute is being affected by the border size, unlike in Chrome where it remains unaffected (which is ...

Troubleshooting problems with Bootstrap on tablets: responsiveness for medium-sized screens

I am having trouble with a responsive design using Bootstrap 3. The navbar looks fine on mobile and desktop screens, but breaks on tablets. Here are the views for mobile, tablet, and desktop: The tablet view is broken, while the mobile and desktop views ...

What steps are needed to create a hover box that appears on the right side of my div?

I am attempting to customize the code found at this link so that the box slides to the left side instead of the right. I thought changing right: 0; to right: 100%; in the .overlay class would achieve this, but it is not working as expected. I want it to l ...

Guide to repositioning elements and fixing the functionality of the hamburger button: [ HTML & Bootstrap ]

Looking for help with creating a navbar for a website using HTML and Bootstrap. Need to move the header and link to the ends of the navbar and ensure that the hamburger button displays correctly on different screen sizes. Here's how it looks on deskt ...

Sign up for our Joomla website by completing the registration form and agreeing to our terms and conditions

I am currently working with Joomla 1.5 and I need to incorporate a checkbox for users to agree to the terms and conditions. I attempted to use the code below, but it is not functioning as expected. Even when the checkbox is ticked, it still triggers an a ...

Extract the data from an HTML form and transfer the values into variables within a node.js function

Issue Description: I am facing a challenge in my project where I need to take three numbers as input from the user through an HTML form. Upon submission, I want these values to be passed to a node.js file and stored in variables. Here is the HTML code sni ...

Unable to retrieve input using jquery selector

I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...

Allow users to edit the textarea only to input values, not from

I am trying to achieve a specific functionality with two input fields and one textarea. Whenever I type something in the input fields, their values are automatically populated in the textarea using .val(). Currently, this feature is working as intended, b ...

The html() method is not functioning correctly in ajax requests

I would like to implement a feature where users can like and unlike a book. However, I am facing an issue where the code only executes once without refreshing the page. JAVASCRIPT <script type="text/javascript"> $(document).ready(function() { ...

Adjust dropdown options based on cursor placement within textarea

I have a textarea and a dropdown. Whenever a user selects an option from the dropdown menu, it should be inserted into the text area. However, I am facing a bug where the selected value is being inserted at the end of the text instead of at the current cur ...

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...