What's the reason this picture isn't displaying in its full size?

I am having trouble adjusting the size of this image to fit the full width, but there seems to be some remaining space on the right side.

Category: CSS/HTML

/* Header */

.header {
  background: url('https://picsum.photos/1920/1080') center center no-repeat;
  background-size: cover;
}

.header .header-content {
  padding-top: 15.5rem;
  text-align: left;
}

.header .text-container {
  margin-top: 3rem;
  margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="content">

  <!-- start of header -->
  <header id="header" class="header">
    <div class="header-content"> //here give an class of that image
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="text-container">
              <h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
              <p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
              <a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
            </div>
            <!-- end of text-container -->
          </div>
          <!-- end of col -->
          <div class="col-lg-6">
            <div class="image-container">
              <img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
            </div>
            <!-- end of image-container -->
          </div>
          <!-- end of col -->
        </div>
        <!-- end of row -->
      </div>
      <!-- end of container -->
    </div>
    <!-- end of header-content -->
  </header>
  <!-- end of header -->

</div>

https://i.sstatic.net/ZWC2c.png

I want to set this image to align fully on the right side (question mark).

Where do I need to make corrections in the code?

htmlcssbootstrap-4

Answer №1

Include the width and height properties for body and html in the head section.

html,body {
width:100%;
height:100%
}

.img-fluid{
width:100%
height:100%
}

.image-container{
width:<!--Specify your desired value--> 20px;
height:<!--Specify your desired value--> 20px;
}

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

Displaying a popup modal in Blazor client side

While I know about Blazored Modal and have read this answer, I prefer not to use a specific component solely for displaying modals due to its limitations. Instead, I want to incorporate modal functionality into different components on my own. Below is a s ...

bootstrap-4blazor

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

javascriptcssvue.js

Using JavaScript to empty input field when switching focus between input fields

I am experiencing an issue with clearing a input number field. Here is the code snippet in question: <input class="quantity_container" v-model="length.quantity" type="number" pattern="[0-9]*" inputmode="numeric" onfocus="if (this.value == &ap ...

javascripthtmlvue.js

Adapt the stylesheet for mobile devices using CSS

I am struggling with updating file paths in CSS depending on whether the end user is accessing my site from a PC or mobile device. Below is my CSS code, where I attempted to redirect users if they are on a handheld device: <link rel="stylesheet" type=" ...

javascriptjqueryhtmlcssmobile

Strategies for decreasing padding or margin in Bootstrap without removing it

I am currently facing a dilemma with the grid system. Although it is supposed to be easy, I am struggling at the moment. Let's consider that I need to correctly implement the Bootstrap grid for this example: https://i.stack.imgur.com/33vse.png Initi ...

htmlcsstwitter-bootstrapbootstrap-4

Obtain the current activity

In my code, I have a wrapper div that contains another div. When the inner div is clicked, a message should be displayed. However, the issue arises when the inner divs all share a common class despite having unique IDs generated at runtime. My markup is g ...

jqueryhtml

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

Adjusting the width of a Material UI select/dropdown component

In my material-ui grid setup, each <Grid> contains a <Paper> element to define the grid's boundaries precisely. Inside every <Paper>, there is a custom <DropDown> component (a modified version of Material-UI's Select). I ...

cssreactjsmaterial-ui

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...

cssangularsass

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

Switching between Login Form and Register Form in VueJS template

Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...

javascriptjqueryhtmlcssvue.js

ETags for webpages generated on the server-side and equipped with a CSP nonce

I have successfully implemented ETags in my server-side-rendered React app using Node/Express, allowing for client-side caching. The HTML is generated with inlined fragments of render-blocking CSS and JS for faster first renders according to Google's ...

htmlexpressbrowser-cachecontent-security-policyetag

Avoiding the utilization of HTML forms

Is it acceptable to send form information using jQuery instead of creating an HTML form? By skipping the traditional HTML form and using $.ajax in jQuery, are there any security, performance, or semantic issues to be concerned about? Does this approach a ...

javascriptjqueryhtmlforms

Create original identifiers for dynamically generated material

I have developed a custom invoice tool that has the capability to dynamically add rows. Here is the code snippet responsible for generating new rows: $("#addrow").click(function(){ $(".item-row:last").after('<tr class="item-row"><td> ...

javascriptphpjqueryhtmlajax

Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...

htmlcssbootstrap-5

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

javascriptjqueryhtmlajaxxml