Step progress bar at active step

I am trying to implement a step progress bar.

The line separating the circled steps has a grey background. This background is not working on the 'active' step however. In the example below, the orange line only extends to 60%. I want the rest of the line to be grey like the other ones.

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}
 
.progressbar {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}
 
.progressbar li {
  list-style-type: none;
  width: 30%;
  float: left;
  font-size: 1rem;

help/question

Hello i was wondering if someone could help me i know how to edit but some reason the edits i do does not turn out right for example http://www.unitedunleashed.com/img/Untitled-2.png the error that i get If someone can help i can give the style css seat that was used but the original version so i can get advice on this subject trying to get it set up like the image that i posted here thanks.

How to center menu and footer bar?

Hi! I’m new in css and i’m building now my first website. I want to center the menu and footer bar? Not only the text, but the whole nav bar. And how to adjust the alignment of footer bar, I mean how to move in slightly top of the bottom of the page? Pls help me. Thank you!

Here’s the script of menu bar css:

.main-navigation {
    clear: both;
    display: table;
    font-weight: 300;
    font-family: 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    position: relative;
    text-align: center;
    border-bottom: 3px solid #e92121;

Making my website responsive - facing problems.

HTML Code -

<!DOCTYPE html>
<html>
 <!-- Made by Yours Truly with loving support of Bootstrap 3.0 !-->
  <head>
    <title>Tushar Gupta | Web Developer & Designer</title>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/animate.min.css" rel="stylesheet" media="screen">
 
 
    <link href="css/main.css" rel="stylesheet" media="screen">
     <link href="css/fontello.css" rel="stylesheet" media="screen">

Positioning background image successfully- simple problem. Can't get image height to expand to accomodate text in it

I have an background image that will not expand its height. I am trying to configure a left column with an address that fits on the paper on a typewriter as a background image. I can’t seem to get the typewriter picture’s height any bigger to fit the address info. in.

Below is the code. I have tried a myriad of coding for background positioning and sizing as well as adjusting working with descendant selectors to understand if adjusting would make a difference. Appreciate any advice anyone can give. thanks.

<style>

Syndicate content