CSS Program where I had issue in width of one div-CodePudding

Here, I am having a road and stripes where there are cars each side. I have that inside div and when I apply it, the div is not having full width. I am finding solution for it but it's not working.

 <div >
            <div id="car-one" >
                <div ></div>
                <div ></div>
                <div  id="tire-one"></div>
                <div  id="tire-two"></div>
            </div>

            <div >
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>

            <div >
                <div ></div>
                <div ></div>
                <div  id="tire-one2"></div>
                <div  id="tire-two2"></div>
            </div>

        </div>

CSS Code:

.road {
    /* position: relative; */
    width: 100%;
    margin-top: 18.5em;
    height: 650px;
    background-color: gray;
    border: 1px solid black;
}

CodePudding user response：

I can guess that your problem is not the width of .road div, but the width of the parent div.

The width of the parent div affects the children elements. So when you write in css like:

.road {
    /* position: relative; */
    width: 100%;

This 100% means the same width as the parent's width.

You can analyze your self, you can open the dev inspector panel by pressing F12 in your browser or right click the page to open the context menu and press inspect.

After that, press Ctrl Shift C and hover on any elements you want. Then you will be able to see the rectangular size of elements.

In conclusion, it's all the css's basics. The css stands for Cascading Style Sheets. In other words, the style is being applying in hirearchy.

You can see more information here.

CodePudding user response：

It looks like you've set the width of the .road element to 100%, which should cause it to take up the full width of its parent element. It's possible that the parent element of the .road div has a fixed width or is using a percentage value for its width that is less than 100%.

You could try setting the width of the .road element to a specific value in pixels, rather than using a percentage, to see if that fixes the issue.

It's also possible that there may be some conflicting CSS rules that are causing the issue. You can try using the "!important" keyword to make sure that the width rule for the .road element takes precedence over any other conflicting rules. For example:

.road {
   width: 100% !important;
   /* other rules */

}

Also, try adding 'border:1px solid red' to elements to diagnose issues like this. Alternate different border colours can help, then you may visually see the problem on the page. This is a technique I've used several times and it works quite well. Uou can add these borders directly into the dev tools to diagnose the issue as long as you don't refresh page...

hope this helps and I've understood the problem correctly