How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px.

Thank you all for your assistance

[![enter image description here][1]][1] [![enter image description here][2]][2]

width:100% [1]: https://i.stack.imgur.com/SmUH9.jpg width:100vw [2]: https://i.stack.imgur.com/39kpm.jpg

@media only screen and (min-width: 1400px){

    body{
        min-width: 1400px;
    }    


    .wrapper{
        width: 100vw;
        height: 100%;
        background:  var(--DarkCyan);
        display: flex;
        align-items: center;
    }
}

Answer №1

The reason for this behavior is due to your wrapper class taking up "100%" of its parent container, which in this case is the body element. By setting the body element to have a minimum width of 1400px, it will not expand beyond that unless its contents exceed that width. As a result, the wrapper child class will only occupy as much space as defined by its parent, limiting it to 1400px.

When using percentage values (such as 100%), they are relative to the parent container's size, whereas viewport values (like 100vw) are independent and based on the screen's viewport dimensions.

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

Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance: I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using: <div class="two_col ...

The styling in CSS does not accurately reflect its relationship to the parent

My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on th ...

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can you explain why Firefox is cutting off circular png images at the bottom of this page: It's strange that IE 10 and Chrome don't have this issue with cropping the images. ...

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

Unable to Trigger Click Event on Div Element in Angular 9

Take a look at my HTML code snippet <mat-grid-list cols="3" rowHeight="150px"> <mat-grid-tile *ngFor="let tile of tiles;index as j;" [colspan]="tile.cols" [rowspan]="tile.rows" ...

Duplicate label issue with 'No files chosen' message on Bootstrap form control

After migrating to webpack for managing our assets (js, scss, ...), everything seemed to be working smoothly. However, we encountered a minor issue where the input label behind the file-selector-button is overflowing with its neighbor, as shown in the exam ...

I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other link ...

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...

Creating an accessible order for the next and back buttons

Currently, I am working on designing the user interface for a checkout flow. Towards the end of the page, there are 3 buttons available - Next, Back, and Cancel. When viewed on a desktop, the button layout appears as follows: (Back) (Next) Cancel http ...

The importance of CSS z-index in optimizing for mobile responsiveness

In my jquery modal dialog box, I wanted to create a shadow effect only between the dialog box and the screen. To achieve this, I added an overlay using a <div>: <div id="overlay" class="overlay btn-hidden"></div> <d ...

Multiple instances of CSS linear gradients being shown

I recently added a linear-gradient effect to the CSS of my HTML website. However, I encountered an issue where the gradient was repeating multiple times on the page. Just to provide some context, my website is hosted on nginx, and for server-side renderin ...

Switching Symbols with JQuery

Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and ...

What is the process for incorporating a Bootstrap link into a specific ReactJS file?

In my current project using React JS, I found the need to incorporate Bootstrap in certain pages. To do this, I initially placed the following code snippet in the Public folder within index.html: <link rel="stylesheet" href="https://netdna.bootstrapc ...

Center a form using Bootstrap

Struggling to center my form using bootstrap as a beginner. I've tried different methods without success. Hoping for some guidance on how to center it while keeping the same size. Any assistance would be appreciated! This is the HTML code: <div ...

Not all divs are triggering the hover event as expected

I am facing an issue while creating a webpage with overlapping background and content divs. The hover event works properly on the div with the class "content," but not on the div with the class "background." There is no interference with the event in the J ...

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

Styling with CSS and Angular: Loading background images dynamically with a greyscale effect

Incorporating the image displayed above as a background photo in CSS is my current objective using Angular. My aim is to alter the photo path for each new item added to my list. As it stands, the styles are hardcoded, resulting in a constant image that fun ...

What is the best way to effectively incorporate Ruby into the CSS attribute of a HAML %li element?

Greetings everyone, I am new to the world of development and seeking guidance from experienced individuals. I have been trying to solve a coding issue for quite some time now. I am currently enrolled in a programming course at Code Academy based in Chicago ...

Seeking guidance on creating an uncomplicated CSS tooltip

Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locat ...