Home > Enterprise >  Whole web page is being destroyed by a horizontal scroll bar.... can't do anything except to wa
Whole web page is being destroyed by a horizontal scroll bar.... can't do anything except to wa

Time：03-23

I am developing a webpage but a horizontal scroll bar is present in the page. I want to remove it but can not. I have been into web development recently and most of web pages I made for practice faced the same problem.

I expect the following part of code to be faulty

.heading::before{border: 2px solid chocolate;

content: "";

height: 100vh;

background: url(....) no-repeat center ;

width: 100vw;

position: absolute;

top: 0px;

left: 0px;

z-index: -1; }

*{
    margin: 0px;
    padding: 0px;
}
nav{
    position: sticky;
    top: 0px;
    left:0px;
    margin: 0px 0px 10px 0px;
    padding: 5px 5px;
    background-color: #15191f;
}
.heading{
    height: 90vh;
    
}
.heading::before{
    border: 2px solid chocolate;
    content: "";
    height: 100vh;
    background: url() no-repeat center ;
    width: 100vw;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}
.flex{
    display: flex;
}
.flex-row{
    flex-direction: row;
}
.flex-column{
    flex-direction: column;
}
.wrap{
    flex-wrap: wrap;
}
.al-cen{
    align-items: center;
}
.ju-cen{
    justify-content: center;
}
nav a{

    text-decoration: none;
    background-color: #15191f;
    color: #e3ecf3;
    padding: 4px 10px;
    border: 2px;
    border-radius: 10px;
   
    
}
nav a:hover{
    color: #15191f;
    background-color: #e3ecf3;
}

#li1{
    margin-left: 50px;
}
#a1{
    margin: 0px 4px;
}
#a2{
    margin: 0px 4px;
}
#a3{
    margin: 0px 4px;
}
#a4{
    margin: 0px 4px;
}
nav ul li{
    list-style: none;
}
#logo{
    width: 5vw;
    border: 2px ;
    border-radius:100mm;

}
/* -------------------------------------------------------------------- */
div ul{
    margin: 0px 40px;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5vw;
    background-color: #e3ecf3;
}
div{
    margin: 20px 15px;
}
ol li{
    margin: 0px 40px;
}

.block{
    display:block;
}
.inline-block{
    display: inline-block;
}
.border-red{
    border: 3.5px solid red;
    border-radius: 12px;
}
.border-green{
    border: 3.5px solid green;
    border-radius: 5px;
}
.border-blue{
    border: 3.5px solid blue;
    border-radius: 5px;
}
.line-height{
    line-height: 8vh;
    
}

ol{
    border: 2px solid blue;
    border-radius: 5px;
    text-align: center;
    /* display: inline-block; */
    margin: 4px 0px;
    width:300px
}
.text-cen{
    text-align: center;
}
ol li{
    margin-left: 40px;
}
input{
    display: block;
}
option{
    background-color:#15191f;
    color:#e3ecf3;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
}
select{
    width: 85px;
    background-color:#15191f;
    color:#e3ecf3;
    height:30px;
    border: 2px solid #15191f;
    border-radius: 6px;
}
.button{
    height: 25px;
    width: 25px;
    /* border: 2px solid #15191f; */
    border-radius: 100px;
    /* background-color: #15191f; */
}
/* .button: */
.checkbox{
    /* background-color: #15191f; */
    height: 25px;
    width: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All in One</title>
    <link rel="stylesheet" href="../CSS/home.css">
    <script src="../JS/home.js"></script>
</head>

<body >
    <nav >
        <img id="logo" src="../random_source" alt="Error loading image">
        <ul >
            <li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
            <li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
            <li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
            <li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
        </ul>
    </nav>
    <div >
        <h1 >All in ONE Website</h1>
        <p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
            it for future usage.</p>
    </div>
    <hr>
    <div >
        <p><b>
                <\b>This Bold<\b>
            </b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
                <\br> Has been used here and here<\br><br>
            </strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
            itaque
            delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
        </p>
    </div>
    <div >
        <div >

            <ol id="ol1"  type="1">
                <h6>OL type 1</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olA"  type="A">
                <h6>OL type A</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="ola"  type="a">
                <h6>OL type a</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olI"  type="I">
                <h6>OL type I</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="oli"  type="i">
                <h6>OL type i</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </div>
        <div >
            <ul type="square">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="circle">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="disc">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </div>
    <div >
        <h3>This is a Table</h3>
        <table>
            <thead>
                <tr>
                    <th>Heading-1</th>
                    <th>Heading-2</th>
                    <th>Heading-3</th>
                    <th>Heading-4</th>
                    <th>Heading-5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row-1-Colum-1</td>
                    <td>Row-1-Colum-2</td>
                    <td>Row-1-Colum-3</td>
                    <td>Row-1-Colum-4</td>
                    <td>Row-1-Colum-5</td>
                </tr>
                <tr>
                    <td>Row-2-Column-1</td>
                    <td>Row-2-Column-2</td>
                    <td>Row-2-Column-3</td>
                    <td>Row-2-Column-4</td>
                    <td>Row-2-Column-5</td>
                </tr>
                <tr>
                    <td>Row-3-Column-1</td>
                    <td>Row-3-Column-2</td>
                    <td>Row-3-Column-3</td>
                    <td>Row-3-Column-4</td>
                    <td>Row-3-Column-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div >
        <h1 >FORMS</h1>
        <h5>Below are some types of input we can ask on forms.Include a NAME in input tags
        </h5>
        <p>We will make input tag a block element to make go to next line and make the code look clean.
            Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
            The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
            when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
            not.
            @gmail.com is value below in email. Remaining are Placeholder
        </p>
        <form action="#">
            Button <input  type="button" placeholder="Placeholder">
            Checkbox<input type="checkbox"  placeholder="Placeholder">
            Color<input type="color" placeholder="Placeholder">
            Date<input type="date" placeholder="Placeholder">
            Datetime<input type="datetime" placeholder="Placeholder">
            Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
            Email<input type="email" value="@gmail.com" placeholder="Placeholder">
            File<input type="file" placeholder="Placeholder">
            Hidden<input type="hidden" placeholder="Placeholder">
            Image<input type="image" placeholder="Placeholder">
            Month<input type="month" placeholder="Placeholder">
            Number<input type="number" placeholder="Placeholder">
            Password<input type="password" placeholder="Placeholder">
            Radio<input type="radio" placeholder="Placeholder">
            Range<input type="range" placeholder="Placeholder">
            Reset<input type="reset" placeholder="Placeholder">
            Search<input type="search" placeholder="Placeholder">
            Submit<input type="submit" placeholder="Placeholder">
            Tel<input type="tel" placeholder="Placeholder">
            Text<input type="text" placeholder="Placeholder">
            Time<input type="time" placeholder="Placeholder">
            Url<input type="url" placeholder="Placeholder">
            Week<input type="week" placeholder="Placeholder">

            Select from a dropdown <select>
                <option value="Option-1-Val">Option-1</option>
                <option value="Option-2-Val">Option-2</option>
                <option value="Option-3-Val">Option-3</option>
                <option value="Option-4-Val">Option-4</option>
                <option value="Option-5-Val">Option-5</option>
            </select>

        </form>
    </div>
    <div >
        <h4>We use entities for displaying some character</h4>
        &lt;
        <!-- Less Than -->
        &gt;
        <!-- Greater Than -->
        &pound;
        <!-- pound -->
        &copy;
        <!-- copy -->
        &rAarr;
        <!-- Arrow -->
        &frac12;
        <!-- In form of fraction -->
        
    </div>
    <div >
        <p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
        <details>
            
            <summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
            A Keyboard.

        </details>
        <p>Now i will use a time tag</p>
        <p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>

    </div>

</body>

</html>

Specifically width: 100vw , if I remove this line the scrollbar disappears but so does the image. width:auto also makes the picture disappears.

  1. I want to display a background picture using this code (picture's address in url). If I remove this code the horizontal scroll bar disappears. Using a border shows that it is indeed the problem. How can I hide scroll bar while displaying an image on whole screen, no matter the size. (I mean no part of screen should be left out.) Most of the answers out there suggest to remove 100vw and 100% width but that removes the picture

If possible suggest other ways which will allow me to display image on full screen without causing any problems to the aesthetics. The picture should be in background and for a specific tag only, not whole webpage.

CodePudding user response：

You need to set box-sizing specifically for pseudo elements.

*, *::before, *::after{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
nav{
    position: sticky;
    top: 0px;
    left:0px;
    margin: 0px 0px 10px 0px;
    padding: 5px 5px;
    background-color: #15191f;
}
.heading{
    height: 90vh;
    
}
.heading::before{
    border: 2px solid chocolate;
    content: "";
    height: 100vh;
    background: url() no-repeat center ;
    width: 100vw;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}
.flex{
    display: flex;
}
.flex-row{
    flex-direction: row;
}
.flex-column{
    flex-direction: column;
}
.wrap{
    flex-wrap: wrap;
}
.al-cen{
    align-items: center;
}
.ju-cen{
    justify-content: center;
}
nav a{

    text-decoration: none;
    background-color: #15191f;
    color: #e3ecf3;
    padding: 4px 10px;
    border: 2px;
    border-radius: 10px;
   
    
}
nav a:hover{
    color: #15191f;
    background-color: #e3ecf3;
}

#li1{
    margin-left: 50px;
}
#a1{
    margin: 0px 4px;
}
#a2{
    margin: 0px 4px;
}
#a3{
    margin: 0px 4px;
}
#a4{
    margin: 0px 4px;
}
nav ul li{
    list-style: none;
}
#logo{
    width: 5vw;
    border: 2px ;
    border-radius:100mm;

}
/* -------------------------------------------------------------------- */
div ul{
    margin: 0px 40px;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5vw;
    background-color: #e3ecf3;
}
div{
    margin: 20px 15px;
}
ol li{
    margin: 0px 40px;
}

.block{
    display:block;
}
.inline-block{
    display: inline-block;
}
.border-red{
    border: 3.5px solid red;
    border-radius: 12px;
}
.border-green{
    border: 3.5px solid green;
    border-radius: 5px;
}
.border-blue{
    border: 3.5px solid blue;
    border-radius: 5px;
}
.line-height{
    line-height: 8vh;
    
}

ol{
    border: 2px solid blue;
    border-radius: 5px;
    text-align: center;
    /* display: inline-block; */
    margin: 4px 0px;
    width:300px
}
.text-cen{
    text-align: center;
}
ol li{
    margin-left: 40px;
}
input{
    display: block;
}
option{
    background-color:#15191f;
    color:#e3ecf3;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
}
select{
    width: 85px;
    background-color:#15191f;
    color:#e3ecf3;
    height:30px;
    border: 2px solid #15191f;
    border-radius: 6px;
}
.button{
    height: 25px;
    width: 25px;
    /* border: 2px solid #15191f; */
    border-radius: 100px;
    /* background-color: #15191f; */
}
/* .button: */
.checkbox{
    /* background-color: #15191f; */
    height: 25px;
    width: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All in One</title>
    <link rel="stylesheet" href="../CSS/home.css">
    <script src="../JS/home.js"></script>
</head>

<body >
    <nav >
        <img id="logo" src="../random_source" alt="Error loading image">
        <ul >
            <li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
            <li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
            <li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
            <li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
        </ul>
    </nav>
    <div >
        <h1 >All in ONE Website</h1>
        <p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
            it for future usage.</p>
    </div>
    <hr>
    <div >
        <p><b>
                <\b>This Bold<\b>
            </b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
                <\br> Has been used here and here<\br><br>
            </strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
            itaque
            delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
        </p>
    </div>
    <div >
        <div >

            <ol id="ol1"  type="1">
                <h6>OL type 1</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olA"  type="A">
                <h6>OL type A</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="ola"  type="a">
                <h6>OL type a</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olI"  type="I">
                <h6>OL type I</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="oli"  type="i">
                <h6>OL type i</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </div>
        <div >
            <ul type="square">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="circle">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="disc">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </div>
    <div >
        <h3>This is a Table</h3>
        <table>
            <thead>
                <tr>
                    <th>Heading-1</th>
                    <th>Heading-2</th>
                    <th>Heading-3</th>
                    <th>Heading-4</th>
                    <th>Heading-5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row-1-Colum-1</td>
                    <td>Row-1-Colum-2</td>
                    <td>Row-1-Colum-3</td>
                    <td>Row-1-Colum-4</td>
                    <td>Row-1-Colum-5</td>
                </tr>
                <tr>
                    <td>Row-2-Column-1</td>
                    <td>Row-2-Column-2</td>
                    <td>Row-2-Column-3</td>
                    <td>Row-2-Column-4</td>
                    <td>Row-2-Column-5</td>
                </tr>
                <tr>
                    <td>Row-3-Column-1</td>
                    <td>Row-3-Column-2</td>
                    <td>Row-3-Column-3</td>
                    <td>Row-3-Column-4</td>
                    <td>Row-3-Column-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div >
        <h1 >FORMS</h1>
        <h5>Below are some types of input we can ask on forms.Include a NAME in input tags
        </h5>
        <p>We will make input tag a block element to make go to next line and make the code look clean.
            Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
            The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
            when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
            not.
            @gmail.com is value below in email. Remaining are Placeholder
        </p>
        <form action="#">
            Button <input  type="button" placeholder="Placeholder">
            Checkbox<input type="checkbox"  placeholder="Placeholder">
            Color<input type="color" placeholder="Placeholder">
            Date<input type="date" placeholder="Placeholder">
            Datetime<input type="datetime" placeholder="Placeholder">
            Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
            Email<input type="email" value="@gmail.com" placeholder="Placeholder">
            File<input type="file" placeholder="Placeholder">
            Hidden<input type="hidden" placeholder="Placeholder">
            Image<input type="image" placeholder="Placeholder">
            Month<input type="month" placeholder="Placeholder">
            Number<input type="number" placeholder="Placeholder">
            Password<input type="password" placeholder="Placeholder">
            Radio<input type="radio" placeholder="Placeholder">
            Range<input type="range" placeholder="Placeholder">
            Reset<input type="reset" placeholder="Placeholder">
            Search<input type="search" placeholder="Placeholder">
            Submit<input type="submit" placeholder="Placeholder">
            Tel<input type="tel" placeholder="Placeholder">
            Text<input type="text" placeholder="Placeholder">
            Time<input type="time" placeholder="Placeholder">
            Url<input type="url" placeholder="Placeholder">
            Week<input type="week" placeholder="Placeholder">

            Select from a dropdown <select>
                <option value="Option-1-Val">Option-1</option>
                <option value="Option-2-Val">Option-2</option>
                <option value="Option-3-Val">Option-3</option>
                <option value="Option-4-Val">Option-4</option>
                <option value="Option-5-Val">Option-5</option>
            </select>

        </form>
    </div>
    <div >
        <h4>We use entities for displaying some character</h4>
        &lt;
        <!-- Less Than -->
        &gt;
        <!-- Greater Than -->
        &pound;
        <!-- pound -->
        &copy;
        <!-- copy -->
        &rAarr;
        <!-- Arrow -->
        &frac12;
        <!-- In form of fraction -->
        
    </div>
    <div >
        <p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
        <details>
            
            <summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
            A Keyboard.

        </details>
        <p>Now i will use a time tag</p>
        <p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>

    </div>

</body>

</html>

CodePudding user response：

On the pseudo element I added box-sizing: border-box and changed the width to 100% instead of 100vw.

box-sizing: border-box

This changes which box is used when declaring absolute widths. When we set this to border-box, it means that the border is placed inside of the declared width, not adding to it. i.e. I have a 100px wide box with 2px border, I want the border to be included in that 100px, not added to it.

width: 100%

Percent widths are relative to the width of the container, whereas viewport are relative to the viewport. 100% means take up all the width of the container I'm in, 100vw means take up all of the viewport width (including the scrollbar).

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

nav {
  position: sticky;
  top: 0px;
  left: 0px;
  margin: 0px 0px 10px 0px;
  padding: 5px 5px;
  background-color: #15191f;
}

.heading {
  height: 90vh;
}

.heading::before {
  box-sizing: border-box;
  border: 2px solid chocolate;
  content: "";
  height: 100vh;
  background: url() no-repeat center;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.wrap {
  flex-wrap: wrap;
}

.al-cen {
  align-items: center;
}

.ju-cen {
  justify-content: center;
}

nav a {
  text-decoration: none;
  background-color: #15191f;
  color: #e3ecf3;
  padding: 4px 10px;
  border: 2px;
  border-radius: 10px;
}

nav a:hover {
  color: #15191f;
  background-color: #e3ecf3;
}

#li1 {
  margin-left: 50px;
}

#a1 {
  margin: 0px 4px;
}

#a2 {
  margin: 0px 4px;
}

#a3 {
  margin: 0px 4px;
}

#a4 {
  margin: 0px 4px;
}

nav ul li {
  list-style: none;
}

#logo {
  width: 5vw;
  border: 2px;
  border-radius: 100mm;
}


/* -------------------------------------------------------------------- */

div ul {
  margin: 0px 40px;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.5vw;
  background-color: #e3ecf3;
}

div {
  margin: 20px 15px;
}

ol li {
  margin: 0px 40px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.border-red {
  border: 3.5px solid red;
  border-radius: 12px;
}

.border-green {
  border: 3.5px solid green;
  border-radius: 5px;
}

.border-blue {
  border: 3.5px solid blue;
  border-radius: 5px;
}

.line-height {
  line-height: 8vh;
}

ol {
  border: 2px solid blue;
  border-radius: 5px;
  text-align: center;
  /* display: inline-block; */
  margin: 4px 0px;
  width: 300px
}

.text-cen {
  text-align: center;
}

ol li {
  margin-left: 40px;
}

input {
  display: block;
}

option {
  background-color: #15191f;
  color: #e3ecf3;
  height: 50px;
  font-size: 1.1rem;
  border-radius: 5px;
}

select {
  width: 85px;
  background-color: #15191f;
  color: #e3ecf3;
  height: 30px;
  border: 2px solid #15191f;
  border-radius: 6px;
}

.button {
  height: 25px;
  width: 25px;
  /* border: 2px solid #15191f; */
  border-radius: 100px;
  /* background-color: #15191f; */
}


/* .button: */

.checkbox {
  /* background-color: #15191f; */
  height: 25px;
  width: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All in One</title>
  <link rel="stylesheet" href="../CSS/home.css">
  <script src="../JS/home.js"></script>
</head>

<body >
  <nav >
    <img id="logo" src="../random_source" alt="Error loading image">
    <ul >
      <li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
      <li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
      <li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
      <li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
    </ul>
  </nav>
  <div >
    <h1 >All in ONE Website</h1>
    <p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of it for future usage.</p>
  </div>
  <hr>
  <div >
    <p><b>
                <\b>This Bold<\b>
            </b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
                <\br> Has been used here and here<\br><br>
            </strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti itaque delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
    </p>
  </div>
  <div >
    <div >

      <ol id="ol1"  type="1">
        <h6>OL type 1</h6>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
      <ol id="olA"  type="A">
        <h6>OL type A</h6>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
      <ol id="ola"  type="a">
        <h6>OL type a</h6>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
      <ol id="olI"  type="I">
        <h6>OL type I</h6>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
      <ol id="oli"  type="i">
        <h6>OL type i</h6>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
    </div>
    <div >
      <ul type="square">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
      <ul type="circle">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
      <ul type="disc">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
    </div>
  </div>
  <div >
    <h3>This is a Table</h3>
    <table>
      <thead>
        <tr>
          <th>Heading-1</th>
          <th>Heading-2</th>
          <th>Heading-3</th>
          <th>Heading-4</th>
          <th>Heading-5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row-1-Colum-1</td>
          <td>Row-1-Colum-2</td>
          <td>Row-1-Colum-3</td>
          <td>Row-1-Colum-4</td>
          <td>Row-1-Colum-5</td>
        </tr>
        <tr>
          <td>Row-2-Column-1</td>
          <td>Row-2-Column-2</td>
          <td>Row-2-Column-3</td>
          <td>Row-2-Column-4</td>
          <td>Row-2-Column-5</td>
        </tr>
        <tr>
          <td>Row-3-Column-1</td>
          <td>Row-3-Column-2</td>
          <td>Row-3-Column-3</td>
          <td>Row-3-Column-4</td>
          <td>Row-3-Column-5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div >
    <h1 >FORMS</h1>
    <h5>Below are some types of input we can ask on forms.Include a NAME in input tags
    </h5>
    <p>We will make input tag a block element to make go to next line and make the code look clean. Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br> The diff between value and placeholder is that the placeholder
      gets removed whan an item is entered, wheras when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is not. @gmail.com is value below in email. Remaining are Placeholder
    </p>
    <form action="#">
      Button <input  type="button" placeholder="Placeholder"> Checkbox
      <input type="checkbox"  placeholder="Placeholder"> Color
      <input type="color" placeholder="Placeholder"> Date
      <input type="date" placeholder="Placeholder"> Datetime
      <input type="datetime" placeholder="Placeholder"> Datetime-local
      <input type="datetime-local" placeholder="Placeholder">
      <p>Just Testing</p>
      Email<input type="email" value="@gmail.com" placeholder="Placeholder"> File
      <input type="file" placeholder="Placeholder"> Hidden
      <input type="hidden" placeholder="Placeholder"> Image
      <input type="image" placeholder="Placeholder"> Month
      <input type="month" placeholder="Placeholder"> Number
      <input type="number" placeholder="Placeholder"> Password
      <input type="password" placeholder="Placeholder"> Radio
      <input type="radio" placeholder="Placeholder"> Range
      <input type="range" placeholder="Placeholder"> Reset
      <input type="reset" placeholder="Placeholder"> Search
      <input type="search" placeholder="Placeholder"> Submit
      <input type="submit" placeholder="Placeholder"> Tel
      <input type="tel" placeholder="Placeholder"> Text
      <input type="text" placeholder="Placeholder"> Time
      <input type="time" placeholder="Placeholder"> Url
      <input type="url" placeholder="Placeholder"> Week
      <input type="week" placeholder="Placeholder"> Select from a dropdown
      <select>
        <option value="Option-1-Val">Option-1</option>
        <option value="Option-2-Val">Option-2</option>
        <option value="Option-3-Val">Option-3</option>
        <option value="Option-4-Val">Option-4</option>
        <option value="Option-5-Val">Option-5</option>
      </select>

    </form>
  </div>
  <div >
    <h4>We use entities for displaying some character</h4>
    &lt;
    <!-- Less Than -->
    &gt;
    <!-- Greater Than -->
    &pound;
    <!-- pound -->
    &copy;
    <!-- copy -->
    &rAarr;
    <!-- Arrow -->
    &frac12;
    <!-- In form of fraction -->

  </div>
  <div >
    <p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
    <details>

      <summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
      A Keyboard.

    </details>
    <p>Now i will use a time tag</p>
    <p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>

  </div>

</body>

</html>

CodePudding user response：

In main tag of your website you should give width 100%:

width : 100%;

if you set 100vw your browser take overflow-x as well as your vertical scrollbar width.

Page link：https//www.codepudding.com/Enterprise/345516.html

Prev:How to group clases in CSS - Tailwind
Next:How do I show GitBook title?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding