The header will not display the text

I can't seem to get the href buttons to align properly in the header. I tried adjusting the margin-top, but it didn't work as expected. Being a beginner in CSS, I'm unsure of what code to use next. Any help would be greatly appreciated.

Also, I forgot to mention that I would like the buttons to be vertically centered within the header.

styles.css


body { 
    margin: 0; 
    padding: 0; 
} 

header div, main { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 1em 0 1em;   
} 

header { 
    background: #d000c2; 
    width: 100%; 
    height: 40px;
    position: absolute; 
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}

header h1 { 
    float: left;
    margin-top: 0px;
} 

main { 
    padding: 21; 
} 

header a { 
    margin-top: -14px;
    text-decoration: none; 
    color: white; 
} 

header li {
    text-transform: uppercase;
    display: inline; 
    margin-right: -14 px;
    margin-top: 0 px;
    font-family: Helvetica;
    font-size: 24px;
    z-index: 11;
}

header a:hover {
    border-top: 3px cyan;
    border-style: solid;
    border-bottom: 0px white;
    border-right: 0px white;
    border-left: 0px white;
}

header li a:hover { 
    color: cyan;
} 

header ul { 
    float: right; 
    list-style-type: none; 
    padding-top: 1em; 
} 

#vid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-size: cover;
    z-index: -1;
}

@media only screen and (max-width: 520px) { 
    header { 
        text-align: center;
        position: relative; 
    } 
    main { 
        padding: 14 px; 
    } 
    header h1 { 
        float: none; 
        margin: 0; 
    } 
    header ul { 
        float: none; 
        margin: 0;
    } 
}

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/styles.css" rel="stylesheet">
</head>
<body>

    <header>
        <div>
            <h1><img src=""></h1>
            <ul>
                <li><a href="#">home</a></li>
                <li>  </li>
                <li><a href="">log-in</a></li>
                <li>  </li>
                <li><a href="">contact</a></li>
                <li>  </li>
                <li><a href="">test</a></li>
            </ul>
        </div>
    </header>
    <main>
        <video autoplay loop id="vid">
            <source src="./videos/background.mp4" type="video/webm">
        </video>        
    </main> 
</body> 

Answer №1

Check out the code snippet

The reason why the list items won't align with the header is due to the 1em top padding set for header ul.

To fix this issue, adjust the CSS for header ul as follows:

header ul { 
    float: right; 
    list-style-type: none; 
    /* padding-top: 1em; */ 
}

UPDATE

If you want to vertically center the links within the header, consider using flexbox.

Feel free to view the updated code snippet for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Fade In effect in jQuery causes my fixed header to overlap with images on the page

This is the javascript snippet using jquery <script type="text/javascript> $(document).ready(function () { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function () { $('#showhidetarget&apo ...

Is it possible to move the login button to the right side of the screen?

I'm attempting to move the Login menu all the way to the right on the navigation bar. Currently, all the menu items are aligned to the left and I need to align the Login menu to the right. However, I'm unsure of where to begin. The navigation me ...

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

One of my Vue.js components is a SideBar that retrieves JSON data. The JSON data consists of names that correspond to specific URLs which in turn contain more JSON data. { "applicants": "url1", "applications": "url2" ...

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in tru ...

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

I am currently building all of my elements manually through the DOM tree, and I am attempting to insert a checkbox symbol in this manner: //Add date var tdDate = document.createElement("td"); tdDate.textContent = ("" + workoutList[idx].date); ...

What is the best way to retrieve data from a Python file and display it in HTML?

I am struggling to transfer data from my Python file to my HTML. Below is the form I am using: <div class="form-group "> <label class="col-sm-3 col-sm-3 control-label">IP Address: </label> <div class="col-sm-9"> & ...

Is there a different option available in place of the JavaScript confirm function?

I developed an application where I heavily utilized the javascript confirm function. confirm("Do you want to proceed"); However, I am not satisfied with the default appearance of the confirm dialog and would like to implement a customized version with be ...

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

Showing data from a MySql database using an HTML table

I am currently working on a pop-up form that captures user data and stores it in a MySQL phpmyadmin table. My goal is to have this data displayed in an HTML table once the popup form is closed. After submitting the form, I am redirected back to the homepag ...

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

Eliminate excess space around images in Bootstrap

I have an image tag with a padding applied to it. I am using the Bootstrap CSS framework. Currently, there is a white background behind the image that I want to remove and make it partially transparent instead. The image is in PNG format, so I suspect the ...

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

Conditionals in ng-class Syntax

I'm attempting to apply a class conditionally to an element, but I'm struggling with the correct syntax. I've experimented with the code below, but it's not functioning as expected: ng-class="{foo: bar === "true"}" The value of bar i ...

Effortlessly find data in an HTML table and showcase the results instantly without

I am looking for a way to implement search functionality in my table without refreshing the page. The fields above the table are used for searching and I want the results to be displayed within the same table. Here is an example of the code: <?php $for ...

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...

Creating a CSS triangle that expands the full width of the page

Here is a triangle: #header-triangle-right { position: absolute; float: right; top:0px; right:0; z-index: 0; overflow: hidden; width: 0; height: 0; border-top: 400px solid transparent; border-right: 1000px solid #00 ...

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...