The grid image is refusing to fall into formation

I have been attempting to align the image in section-1 to the right side, but for some reason, it's not cooperating. I initially tried using flex-box, but I want the image to remain fixed on the right side of the screen without any movement. Floats caused disruptions in the section below, so I turned to grid. Even after setting the display grid and defining the columns, it still doesn't seem to work.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  line-height: 50px;
}

.navbar .container {
  align-items: center;
  display: flex;
}

.navbar-list {
  display: flex;
  margin: auto;
}

.navbar-list ul li {
  align-items: center;
  margin-left: 20px;
}

.navbar-list li a {
  margin-left: 20px;
  color: var(--pureblack);
}


/*section 1*/

.section-1 {
  display: grid;
  grid-template-columns: auto 400px;
}

.mockups {
  height: 400px;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--font-color-base);
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
<nav id="topNav" class="navbar nav">
  <div class="container flex">
    <img src="/easybank-landing-page-master/images/logo.svg" alt="company logo" />
    <ul class="navbar-list">
      <li>
        <a href="">Home</a>
      </li>
      <li>
        <a href="">About</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
      <li>
        <a href="">Blog</a>
      </li>
      <li>
        <a href="">Careers</a>
      </li>
    </ul>
    <button class="btn btn-green">Request invite</button>
  </div>
</nav>
<section class="section-1 container">
  <div class="container">
    <div class="left">
      <h3>Next generation digital banking</h3>
      <p>
        Take your financial life online. Your Easybank account will be a one-stop-shop for spending, saving, budgeting, investing, and much more.
      </p>
      <button class="btn btn-green">Request Invite</button>
    </div>
    <div class="right">
      <img src="/easybank-landing-page-master/images/image-mockups.png" alt="mockups" class="mockups" />
    </div>
  </div>
</section>

Answer №1

Positioning is causing issues with the grid layout. Consider removing the position property from the navbar class.

Answer №2

To make .left and .right children of the grid container, follow this example:

.section-1 .container {
  display: grid;
  grid-template-columns: auto 400px;
}

This method worked perfectly for me.

Your previous code had the entire .container div confined to the left column.

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

Tips for creating a background image that seamlessly adjusts to various computer screen sizes

I am trying to make sure that an image fills the entire browser window, but unfortunately it has fixed width and height dimensions. Is there a way to adjust this so it displays correctly on screens of different sizes? Can CSS be used to stretch the backg ...

How can you customize the color of the arrows in Carousel Bootstrap?

I've utilized Carousel Bootstrap to create a slideshow, but I'm struggling with changing the color of the arrows. Could you please assist me in figuring out how to change the color of the arrows? Thank you! slideshow.component.html: <di ...

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

Image cannot be shown on HTML webpage

There seems to be an issue with the rendering of the image on the index.html page. All the necessary files, including index.html, app.js, and the image file are located in a virtual machine (VM). After successfully logging in with login.js, the page redire ...

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

What methods can I use to toggle between different divs using navigation buttons?

There are 4 divs on my webpage that I need to toggle between using the up and down arrows. Despite trying an if else statement, it doesn't work as intended. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.c ...

Experiencing an error while trying to implement a node.js server-side service through AngularJS. Encountering the error message: "Error: [$injector:nomod] Module ‘angularjsNode

An error has occurred: Error: [$injector:modulerr] Failed to instantiate module angularjsNodejsTutorial due to: Error: [$injector:nomod] Module ‘angularjsNodejsTutorial’ is not available! You either misspelled the module name or forgot to load it. If r ...

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while th ...

Vintage webpage utilizing Bootstrap 3.3.4

I've been working on updating my old website that was built with Bootstrap 3.3.4 a few years ago. Recently, I made some minor changes to the content and everything was working fine just last week. However, when I checked the website today using XAMPP, ...

CSS problem with rotating image carousel

I'm currently working on incorporating the moving box feature displayed at the bottom of this page. Despite following the CSS code provided, I am facing an issue where the left navigation arrow is not appearing. Can anyone provide any insights or sugg ...

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

Utilize checkboxes to sort through MySQLi data

Currently, I have a page that is populated with various types of posts such as news and blog entries. My goal is to implement checkboxes so that users can select which type of post they want to view. For example, I would like the option to check 'new ...

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

Ways to center text within a nested div in a parent div with table-cell styling

The issue I am facing involves a parent div with the CSS property display: table;. Nested inside is a child div with display: table-cell;. Despite applying text-align: center;, the text within the second div does not align to the center as expected. Here ...

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

Creating a text input with a CSS gradient

Can the text color of an input be set as a gradient? I came across this method for regular static text but it doesn't seem to work for inputs: h1 { font-size: 72px; background: -webkit-linear-gradient(to right, rgb(66, 251, 227), rgb(43, 43, 2 ...

Difficulty with replacing colors in an image on certain devices when using HTML5 Canvas

I have created a 2d RTS HTML5 / Javascript game that utilizes images to represent the player's units and buildings. To achieve different variations of these images with different colors, I use a script that replaces certain colors in the original imag ...