How come my div or navbar doesn't extend all the way to the right side of the screen?

I'm having trouble getting my div and navbar to stretch all the way to the right at 100% width. Despite setting it up that way in the CSS, it seems to stop short of reaching the edge. Here's a screenshot of what I'm seeing:

screencap

CSS

.section2{
        font-size: 2em;
        background-color: white;
        width: 100%;
        height: 100%;
        opacity: .75;
}

HTML

<section class="section2">
<div class="row" align="center">
    <div class="col-md-12">
        text
    </div>
    <div class="row" style="font-size:.75em" >
        <div class="col-md-12" >

        </div>
    </div>
</div>
<br><br>
<div class="row" align="center">
    <div class="col-md-12">
    text
    </div>
    <div class="row" style="font-size:.75em">
        <div class="col-md-12">text

 </div>
    </div>
</div>
<br><br>
<div class="row" align="center">
    <div class="col-md-12">
    text
    </div>
    <div class="row" style="font-size:.75em">
        <div class="col-md-12">Text

 </div>
    </div>
</div>
</section>
htmlcss

Answer №1

The resolution I discovered entails setting the margin and padding of the body and html elements to 0.


html, body {
    margin:0;
    padding:0;
}

Answer №2

It appears the parent element of section2 is not filling up the entire screen height.

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

What is the best way to enlarge an image and have it perfectly fill the screen while scrolling?

Having a background in photography and using SVG graphics as a mask, I have implemented an image as the background-image and the svg mask as a mask-image on the same element. The result is displayed below: My query pertains to expanding this image to fit ...

htmlcsssvg

Statement for booking is currently not functioning as expected

For a while now, I've been struggling to create an SQL query that checks the availability of hotel rooms between two specific dates. Unfortunately, I haven't been able to get it working properly as MySQL keeps throwing errors. It appears that the ...

phpmysqlsqlhtml

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

javascripthtmlreactjsmaterial-uifetch

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...

c#htmlblazor

Click event dynamically bound to list items

I have a web application built with Durandal and Knockout. Here is the HTML code snippet: <ul id="header"> </ul> In a JavaScript function, I am dynamically adding a list item as follows: $("#header).append('<li id="btn"><a hre ...

javascriptjqueryhtmlknockout.js

Text input field for username not visible on screen

https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...

htmlcss

Steps to make a div that perfectly matches the size of the image inside, ensuring responsiveness

Currently, I am in the process of creating a mobile e-mail template without the use of JavaScript. The main requirement is for the template to be responsive. My goal is to insert multiple images in a row, with the ability for the images to scale down when ...

htmlcssimageresponsive-images

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

cssreactjstailwind-csscss-position

Uncovering the hidden treasures of checkbox values using jQuery

I've encountered an issue with a form containing checkboxes. Some values are meant to be true by default, so I've hidden them using the following method: <input type=checkbox name="<%= _key %>" checked="checked" style="display:none" /& ...

javascriptjqueryhtml

Invoke a function located in views.py using the template

I need to trigger a method in views.py from my HTML template when the user is logged in. I am unsure about which HTML syntax to use for this purpose. I want to execute the method without requiring the user to click any buttons or submit any forms. {% bl ...

htmldjangopython-3.x

Ways to adjust image height to fit within a container while preserving its original aspect ratio

Does anyone know how to make an image in a two-column section fill its container without becoming distorted? I've tried using object fit and adjusting max widths, but nothing seems to work. Any advice would be greatly appreciated. Thank you. #sect ...

htmlcssresponsiveaspect-ratio

Using CSS Sprites for Zoomable Element Graphics

I am faced with a situation where I have a segment of HTML code featuring images that can be resized or zoomed in simply by adjusting their width and height. My goal is to replace these images with CSS Sprites in order to load just one file instead of mult ...

htmlcsscss-sprites

How does HTML calculate the percentage-based size of a child element when the parent element has padding?

After analyzing the scenario presented, it appears that the outer yellow box is 240px wide (200 width plus 20 padding on each side). The red child inside has its width set at 50%. Surprisingly, when rendered, the red box measures 140px in width. You can v ...

htmlcss

Opacity for ghost images in HTML5 drag-and-drop interface

Is there a way to make the ghost image for draggable elements in Chrome render on a transparent background, similar to how Firefox does it? I'm seeing that in Chrome (Chromium 45), the ghost image is displayed on a white background. For Example: http ...

csshtmlgoogle-chromedrag-and-drop

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

cssreactjsnext.jsrollup

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so ...

cssangular-materialangular7virtualscrollangular-cdk-virtual-scroll

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

Removing empty table rows using JavaScript when the page loads

Within my HTML table, I have noticed some empty cells and rows that need to be removed. To give an example of the code: <table id="7"> <tr> <td>Name</td> <td>Type</td> <td>Parent</td> <td>Time</td&g ...

javascripthtmlcss

JavaScript and modifying color using hexadecimal color codes

Being a novice in front-end development, I embarked on a project using JavaScript that would alter the color of a div based on environmental parameters such as temperature and pressure. My initial idea involved creating buttons to adjust the temperature - ...

javascripthtmlcss

Consistent height for h2 containers across all CSS grid columns

Is there a way to ensure all h2 containers have the same height, both with JavaScript and without it? The h2 titles are dynamic and can vary in length, but I want to maximize the space for all containers. img { max-width: 100%; height: auto; } .gri ...

javascripthtmlcssgrid