How to make an image go directly below the navbar?-CodePudding

I am trying to put an image at the top of the page, just below the navbar. Whether I use margin or padding CSS styles, the picture always stays at the bottom. If I try to use padding-bottom, it simply crops the picture by that number of pixels(it crops because I used "object-fit: cover;", otherwise it would stretch the image).

Here is the CSS code I used for the image in question:

#image {
    bottom: 100px;
    height:500px;
    width:100%;
    object-fit: cover;
}

Here are the CSS styles for the navbar:

.navcontainer {
    height: 100vh;
    width:100%;
}
nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 30px;
    padding-left: 10%;
    padding-right: 10%;
    background-color:cadetblue;
    margin-bottom: 0;
}

A peculiar thing I noticed is that the image is always one scroll away from the top of the page. Whether I am viewing the webpage on a laptop or a phone, I have to scroll exactly once to see the image.

I am unable to find the root cause of this problem. I am trying to make my webpage look similar to this: Picture is directly below the navbar You can see the image is touching the navbar, and there is no gap between the navbar and the image.

EDIT: Here is some other code that may be useful:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navcontainer {
    height: 100vh;
    width:100%;
}

(.navcontainer is a div surrounding the navbar) Below is the CSS styles for the navbar links:

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
}
nav ul li a {
    text-decoration: none;
    font-weight: bold;
    transition: ease-in-out 0.3s;
    padding: 10px;
}

Any help is appreciated!

Thank you, Kunj Parikh

CodePudding user response：

The problem is that you are using the CSS property "bottom" to position the image, which sets the distance of the element from the bottom of the parent container. Instead, you should use "top" to position the image from the top of the parent container. You should also remove the "margin-bottom: 0" from the navbar CSS as it is unnecessary.

Try this:

#image {
    top: 0;
    height:500px;
    width:100%;
    object-fit: cover;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 30px;
    padding-left: 10%;
    padding-right: 10%;
    background-color:cadetblue;
}

CodePudding user response：

I noticed the styling for my .navcontainer class surrounding the navbar said the height of the navbar to be 100vh. I noticed that the .navcontainer class is unnecessary, and deleted the element and the styling, fixing my webpage.