Tips for achieving full width design within a container

Hello everyone, I require some assistance. I am attempting to create a full-width navigation while being constrained by a wrapper div with a fixed width of 900. I am unsure of how to achieve this without creating an additional div like the header. I am seeking a solution that allows me to set the full width of elements inside the wrapper with minimal code. Below is the HTML code. Please make the code beginner-friendly as I am new to coding.

<html>
    <head>
        <title>MY TITLE</title>
        <link rel="stylesheet" href="design.css">
    </head>

    <body>
        <div class="full">
            <div class="box">
                <h1>HEAD</h1>
            </div>
        </div>
            <div class="wrapper">
            <div class="list">
                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact Us</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Below is the relevant CSS code:

*{
    padding:0px;
    margin:0px;

}

.wrapper{
    margin:0 auto;
    width:900px;
    border:1px solid red;
    background:green;

}
.full{
    width:100%;
    background:black;

}
.box{
    text-align:center;
    color:red;
    width:500px;
    margin:0px auto;
    background:black;

    }
.list{
    margin:0 auto;
    width:500px;

    }
ul li {
    display:inline;
    list-style-type:none;
    padding-right:30px;
   }

Answer №1

Consider implementing the following CSS -

body { position: relative; }
.list { height: 35px; left: 0; position: absolute; right: 0; top: 38px; width: 100%; }
.list > ul { margin: 0 auto; max-width: 900px; padding: 7px 0; text-align: center; }

If you prefer to maintain elements within a wrapper without introducing additional divs, this solution may suit your needs.

Answer №2

give this a shot. try deleting the width:900px; property

alternatively, you can set it to width: 100%;

.container{
    margin:0 auto;
    border:1px solid blue;
    background-color:yellow;
}

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

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

iOS devices are not displaying the background image as intended

I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile ...

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

I'm currently working on a chrome extension and utilizing Bootstrap-Vue in my Vue files. I have imported bootstrap/bootstrap-vue into my js file, but the styling is being applied globally. Is there a way to scope the Bootstrap only onto specific inser ...

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

I've spent several days debugging the code, but I can't seem to find a solution. I've gone through the AngularJS documentation and numerous Stack Overflow questions related to the error, yet I'm still unable to identify what's caus ...

I'm having trouble getting my HTML <button> element to function correctly

I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button ...

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

Designing an advanced remote upload system using jQuery AJAX and PHP

Currently, I am in the process of developing an image hosting script and everything is going smoothly so far. To enable local uploading with drag & drop + AJAX, I have utilized various plugins which are working perfectly. Now, I am moving on to implementin ...

Ajax activates a slider

One element I have is a menu div, along with a content div Initially, when the slider (which is a jquery plugin) is placed in the index.php, everything appears to be working well, as shown in the image below However, my objective is to have each page&apo ...

Format the image to fit within a div container

I'm currently utilizing Bootstrap and am looking to insert some images into my div while ensuring they are all the same size (standardized). If the images are too large (as they typically are), I want to resize them to fit within my div and crop them ...

Using HTML5 to play video from a stored binary string

I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...

The HTML <select> element is currently styled with a locked CSS, but I am looking to have it displayed with the default

Unfortunately, I am unable to make changes to the CSS file at this time. The current styles in the CSS file are as follows: font-size: 13px; padding: 6px 4px; background-color: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); clear: both; margin- ...

Flexbox sets aside space for resized svg images

I am currently working on my site header and I want to implement flexbox for this purpose. I tried using justify-content: space-between; to evenly distribute the empty space between the divs. However, when I add an SVG image and scale it down to fit the ...

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

Close the ionicPopup by tapping anywhere

Currently, I have implemented an ionicPopup that automatically closes after a certain time limit. However, I am wondering if there is a way to configure it to close with a single or double tap anywhere on the screen instead. While I am aware that setting a ...

Executing functions and setting element values upon loading in Javascript

I am currently working on updating a small Javascript function that assigns an active class to the parent <div> of a group of radio buttons when the page loads and also when there's a change event. The existing function looks like this: functi ...