Landing page project

Programming
1

Your #nav-bar should always be at the top of the viewport.

This is my code:

            font-family: italic, sans-serif;
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        header {
            padding: 20px;
            text-align: center;
        }
        header img {
            max-width: 100%;
            height: auto;
        }
        nav {
            margin-top: 30px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 20px;
            text-align: right;
        }
        nav ul li a {
            text-decoration: none;
            color: gray;
            font-weight: bold;
            font-style: italic;
        }
        .sample {
            max-width: 100px;
            margin: 0 auto;
            padding: 20px;
        }
        .dress {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }
        .dress-item {
            flex-basis: calc(33.33% - 20px);
            margin: 10px;
            text-align: center;
            border: 1px solid black;
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: blue;
            text-align: center;
            padding: 20px;
            position: relative;
            bottom: 0;
            width: 100%;

        }
        iframe {
            width: 460px;
            height: 265px;
        }
        #nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
        }
        @media screen and (max-width: 1000px) {

        }

How do i go about it

2

Sometimes margins can prevent passing.

Its hard to tell if this is the problem without looking at what your #nav-bar is attached to.
If this is the problem adding margin: 0px to #nav-bar might solve it.

3

Hi,
Please specify the element you are setting these styles to.

As for the #nav-bar, I don’t know if it’s a good approach or not but I apply the position: fixed; to my header element. Since the #nav-bar is included in the header, it will work. I have used it in my projects and it works, but you can correct me if it’s a bad approach.

4

Adding the margin works. Thanks alot.

5

setting it to #nav-bar. I have added a margin: 0px; and the code has worked.

Thanks.