CODEWITHSUNDEEP
css
Daniel Bodon
Daniel Bodon

Reputation: 7

Padding behaves strange in html page after using javascript

Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:

https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/

I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.

I want to get rid of it. Here is screenshot from my browser: here On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.

Here are my index.html and styles.css files:

HTML:

<!doctype html>
<html>
    <head>
        <title>RA TOOLKIT</title>
        <meta name="description" content="Our first page">
        <meta name="keywords" content="html tutorial template">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="nav-menu">eha</div>
    </body>
</html>

CSS:

 body{
    background-color: red;
    display: flex;
    flex-direction: row;
    padding-top: 0px;}
.nav-menu{
    background-color: white;
    transition: all .2s;
    width: 25vw;
    min-height: 100%;
    box-sizing: border-box;}
.nav-menu:hover{
    background-color: greenyellow;}

Thanks in advance! (sorry for my english : D )

Upvotes: -1

Views: 35

Answers (1)

Shafian
Shafian

Reputation: 100

When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a

body {
  margin: 0px
}

to your html body. You can always use inspect element to figure out your final style render of your page

Upvotes: 0

Related Questions