Get this margins out!

HTML & CSS
1

hi!recently i’ve finished my first html and css project.it looks like this…

1305×744 650 KB

notice there are two white margins on the right and the bottom.how to get rid of these?
my html and css codes are as follows…

` <!DOCTYPE html>
<html>
<head>
    <title>JUST RANDOM SHITS</title>
    <link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div id="main">
    <div id="container">
        <div id="logo">
            <a href="home.html">
                <img src="file:///C:/Users/USER/Desktop/projects/images/logo.png" alt="logo">
            </a>
        </div>
        <div id="nav">
            <ul>
                <li id="home"><a href="home.html">HOME </a></li>
                <li id="port"><a href="portfolio.html">PORTFOLIO</a></li>
            </ul>
        </div>
        <div id="heading1">
            <h1>JUST RANDOM SHITS</h1>
        </div>
        <div id="heading2">
            <h2>RANDOM SHITTY ARTS</h2>
        </div>
        <footer><div class="msg" id="msg1">
                <h6>STAY CONNECTED</h6>
            </div>
            <div class="social">
                <a href="#"><img src="file:///C:/Users/USER/Desktop/projects/images/fb.png" alt="facebook"></a>
            </div>
            <div class="social">
                <a href="#"><img src="file:///C:/Users/USER/Desktop/projects/images/instagram.png" alt="instagram"></a>
            </div>
            <div class="social">
                <a href="#"><img src="file:///C:/Users/USER/Desktop/projects/images/youtube.png" alt="youtube"></a>
            </div>
            <div class="msg" id="msg2">
                <h6>-SAKIR INTESER</h6>
            </div>
            </footer>
        
    </div>
</div>
</body>
</html>`

here is the css:

body{
    margin: 0px;
}

#main{
    background-image: url(file:///C:/Users/USER/Desktop/projects/images/background.jpg);
    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#logo{
    float: left;
    padding-left: 50px;
    padding-top: 21px;
}

#nav{
    background-color: #3366ff;
    clear: left;
    position: relative;
    top: 35px;
    height: 40px;
}

ul{
    list-style: none;
}

#port{
    padding-left: 1054px;
    position: absolute;
    top:5px;
    font-size: 25px;
}

#home{
    padding-left: 930px;
    position: absolute;
    top:5px;
    font-size: 25px;
}

li a{
    text-decoration: none;
}

a:visited{
    color: #eeebeb;
}

a:hover{
    color: #eeebeb;
    text-decoration: underline;
}

#heading1{
    text-align: center;
    position: relative;
    top: 50px;
    font-size: 40px;
    color:#dddcdc;
}

#heading2{
    text-align: center;
    position: relative;
    top: 0px;
    font-size: 30px;
    color:#dddcdc;
}

footer{
    background-color: #171515;
    position: relative;
    top: 200px;
    height: 66px;
}

.msg{
    color: #f9fafb;
    font-size: 20px;
    display: inline;
}

#msg1{
    position: relative;
    top: 20px;
    left: 42px;
}

#msg2{
    float: right;
    position: relative;
    bottom: 60px;
    padding-right: 12px;
}

.social{
    display: inline;
    position: relative;
    left: 200px;
    bottom: 35px;
    padding-left: 10px;
}
2

That is the edge of your page. You set a fixed size, so when the browser window is bigger than that size it just shows blank white-space.
You can set the background colour to black (or anything) if it fits your design better and centre your content container with margin: 0 auto
But really, you should not be creating fixed size, rigid designs these days.

3

Now, looking at a mock-up of the page, its the way you positioned the nav items, big px padding and absolute positions is not good, it’s pushing the items off the end of the bar, that’s where the right space is coming from. The bottom is from the fixed height, which is rarely a good idea.

4

so what do you think should be done?should i change the absolute positions to relative?and what about the big px paddings?and if i dont set any width or height for the background the full image doesn’t get shown.what should i do to show the full image without stretching the image?

5

If your image is not the same aspect ratio (proportions) as the viewport, you won’t be able to show the full image without stretching it.

6

Those menu items may be better floated right.

You could generate some vertical space by adding top/bottom margins/padding to the titles.
Or you could try height: 100vh to fill the full viewport height from top to bottom on whatever size screen.

Using background-size: cover can fix this, at the expense of some cropping when the aspect does not match. Cropping is preferable to distorting IMO.

1 Like
7

Exactly. That’s why I said that he wouldn’t be able to show the full image. :smile:

8

alright guys thank you very much

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.