remove margin and center my text on a nav-bar

Naga Nir 0
Viewed 28

Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!). ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Design</title>
    <link href="q1.css" rel="stylesheet"/>
    <style>

    body{
       margin:0;
       background-color: rgb(36, 37, 37);
    }
    .container{
        padding-top:3px;
        padding-bottom:3px;
        width: 100%;
        background-color:#003333;
        height: 50px
    }

    .title-box{
        margin-left: 20px;
    }
    .title-box label{
        margin: 5px;
        width: 130px;
        text-align: center;
        color:#E0E0E0;
        border-color:rgb(11, 107, 19);
        border-style:double;
        border-width: medium;
        width: fit-content;
        
    }

    .tasks{
        float: right;
    }
    

    .para{
        padding-left: 8px;
        margin: 0%;
        background-color: #515253;
        padding-top: 10px;
        padding-bottom: 10px;
        width: fit-content;
    }
    .para p{
        margin: 0%;
        color: #e1f2f7;
    }
    

    

    </style>
  </head>

  <body>
    <div class="container">
        <div class="title-box">
            <label>Webpage</label>
        </div>
        <div class="tasks">
            <a href="#">HOME</a>
        </div>
    </div>
    <div class="para">
        <p>The first web page went live on August 6, 1991. 
            It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. 
            It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. 
            The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
            A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
            <br><br>
            A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
            <br><br>
            When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
        </p>
    </div>
  </body>
</html>

enter image description here

flexbox css-selectors css html
1 Answers

Add flex and align-items: center; to .container.

Remove the height on .container and use padding instead.

Remove float from .tasks and use margin-left: auto;.

Then you can adjust spacing between the a's using margin-right: on .tasks a

body {
  margin: 0;
  background-color: rgb(36, 37, 37);
}

.container {
  padding-top: 3px;
  padding-bottom: 3px;
  width: 100%;
  background-color: #003333;
  padding: 25px 0;
  display: flex;
  align-items: center;
}

.tasks {
  margin-left: auto;
}

.tasks a {
  color: #fff;
  text-decoration: none;
  margin-right: 1em;
}

.title-box {
  margin-left: 20px;
}

.title-box label {
  margin: 5px;
  width: 130px;
  text-align: center;
  color: #E0E0E0;
  border-color: rgb(11, 107, 19);
  border-style: double;
  border-width: medium;
  width: fit-content;
}

.para {
  padding-left: 8px;
  margin: 0%;
  background-color: #515253;
  padding-top: 10px;
  padding-bottom: 10px;
  width: fit-content;
}

.para p {
  margin: 0%;
  color: #e1f2f7;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Design</title>
  <link href="q1.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="title-box">
      <label>Webpage</label>
    </div>
    <div class="tasks">
      <a href="#">HOME</a>
      <a href="#">HOME</a>
      <a href="#">HOME</a>
      <a href="#">HOME</a>
    </div>
  </div>
  <div class="para">
    <p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
      was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
      page may contain text, graphics, and hyperlinks to other web pages and files.
      <br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
      website, like our Computer Hope website.
      <br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
    </p>
  </div>
</body>

</html>

Kameron0
Related