Website Project for school

Projects Personal Projects
1

Hello,

I’m making a website with HTML and CSS for school project, but I’m having an issue. I tried to put the navigation bar to the center, but it doesn’t work. How do I put the navigation bar to the center? On the browser this is how it looks like. Can anyone help me please? Thank you!

<!DOCTYPE html>

<html>

<head>

    <title>Red Devil</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="styles/design.css" type = "text/css" rel="stylesheet">

</head>

<body>

<nav class="selection">

  <a href="#">Menu</a>

  <a href="#">Delivery App</a>

  <a href="#">Our location</a>

  <a href="#">Contact Us</a>

</nav>

<div class ="title">

  <h1 id = "Red">Red Devil</h1>

</div>

<div class ="description">

  <p id="Description">

    The Red Devil is a restaurant that delivers meals by electronic vehicles and drones!

    You can pick any meal you want and we will cook it and deliver it fast as possible!

    We are only using electronic vehicles in order to protect the environment!

    The vehicles are auto-driving mode so you don't need any interactions with a person or a drone will drop your meal right in front of your door!

    We are only available for delivery due to the Covid-19.

    </p>

</div>

<div class = "row1">

  <div class="col-1-1">

  </div>

  

  <div class="col-1-2">

  </div>

  

</div>

  </body>

</html>

* {

    box-sizing: border-box;

  }

body {

    margin: 0;

    background-image: url("../styles/images/red.jpg");

    height: 1500px;

    width: 1500px;

  }

  

.selection {

  overflow: hidden;

  background-image: url("../styles/images/hanji.jpg");

  display: inline-flexbox;

}

  

  /* Navbar links */

.selection a {

    float: right;

    display: block;

    color:  black;

    text-align: justify;

    border: 20px 40px;

    padding: 14px 20px;

    margin: 20px 80px;

    text-decoration: none;

    overflow: hidden;

    font-size: 35px;

  }

  

  /* Links - change color on hover */

.selection a:hover {

    background-color: greenyellow;

    color:  black;

  } 

 #Red {

   

    color: #FF3D14;

    font-family: 'Kalam', cursive;

    font-size: 200px;

    display:table;

    position: relative;

    left: 400px;

    bottom: 100px;

    background-color: #333333;

    text-align:center;

    margin:100px;

    height:20px;

    margin-right:20px;

    border-style:solid;

    border-color:#DDDED4;

    text-align: center;

    padding: 10px;

    

 }

 

 #Description {

  display:inline;

  margin:120px;

  float:left;

  width:1000px;

  height: 240px;

  margin-left:20px;

  font-size:25px;

  margin-bottom:50px;

  overflow:auto;

  border-style:double;

  border-color:#DDDED4;

  background-color:white;

  color:black;

  font-family: 'Permanent Marker', cursive;

  padding: 10px;

  position: relative;

  bottom: 320px;

  left: 450px;

  text-align: center;

}

.col-1-1 {

     background-image: url("../styles/images/bbq치킨.jpg");

     height: 400px;

     width: 480px;   

     position: relative;

     top: 40px;

    }

Here’s a screenshot:

Cap 2020-11-22 16-40-54-183
Cap 2020-11-22 16-40-54-1831904×906 468 KB

2

Hello! Could you please review this post on how to correctly format code in the forums.

1 Like
3

I’ve edited the OP’s post to correctly format the code.

@bitsurfer25092 you can look at your post to see what changes I made, or check out the link @codeneutrino posted which explains how it works. :slight_smile:

1 Like
4

I am pretty sure what you need to do here is to add a width to the selection element so that it takes up the width of your screen, and then justify the content center:

.selection {

    overflow: hidden;

    background-image: url("../styles/images/hanji.jpg");

  

    width: 100vw;

    display: inline-flex;

    justify-content: center;

}
5

It worked! Thank you very much!

1 Like
6

Thank you very much for telling me!

7

Thank you so much for telling me!