Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
134 views
in Technique[技术] by (71.8m points)

html - CSS - Div not taking up entire width

For some reason my html and css isn't taking up the entire width of the page, even though I set margin and padding to 0, and width to 100%. It's always worked before, but I have no idea why it isn't working this time. The only thing that has been implemented so far is the just the background and navbar. I have attached an image to demonstrate how it appears right now. Any help would be appreciated.

enter image description here

    *{
       margin: 0;
       padding: 0;
       width: 100%;
       box-sizing: border-box;
       font-family: sans-serif;
    }
 
    body{
       overflow-x: hidden;
    }

    .container{
       width: 100%;
       height: 100vh;
       background: #42455a;
    }

    .navbar ul{
       display: inline-flex;
       margin: 50px;
    }

    .navbar ul li{
       list-style: none;
       margin: 0px 20px;
       color: #b2b1b1;
       cursor: pointer;
    }

    .logo img{
       width: 30px;
       margin-top: -7px;
       margin-right: 48px;
    }

    .active{
       color: #19dafa !important;
    }
<!DOCTYPE html>
    <html>
    <head>

    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- CSS File -->
    <link rel="stylesheet" type="text/css" href="check.css">

    <title>Webpage title</title>
    </head>
    <body>

    <div class="container">
        <div class="navbar">
            <ul>
                <!-- logo -->
                <li class="logo"><img src=""></li> 
                <li class="active">Home</li>
                <li>Services</li>
                <li>Product</li>
                <li>Contact</li>
            </ul>
        </div>
        
    </div>

    </body>
    </html>
question from:https://stackoverflow.com/questions/65862308/css-div-not-taking-up-entire-width

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You're using Bootstrap.css, which defines a max-width: 540px rule on any element with class="container" when the browser viewport width is wider than 576px:

enter image description here

To fix this, use a different class name other than container, or extend the .container rule in your own stylesheet to set max-width: none;.

But, in my frank opinion, the best solution is to not use Bootstrap.css and to instead take responsibility for styling your own website. I feel Bootstrap has gotten bigger and bigger over the years it takes just as much effort to "learn Bootstrap" as it does to learn how to write one's own base common stylesheet.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...