Tribute Page - Build a Tribute Page

HTML-CSS
1

I made a “div” box and set the necessary values, but why is it on the right side because I need it and on the left there is no my set border

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="styles.css">
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title id="title">Tribute Page</title>
</head>
<h1>Nikolay Ivanovich Pirogov <br>(1810-1881)</br></h1>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Repin_Pirogov.jpg/640px-Repin_Pirogov.jpg"/>
<p>In the picture, Ivan Nikolaevich arrived in Moscow, where he was met by an enthusiastic crowd of people.</p>

<body>
   <main id="main">
<div class="box-1"></div>



   </main>
</body>
</html>

/* file: styles.css */
body{
 margin:0;
  border-top:30px solid #dcdcdc;
  border-right:15px solid #dcdcdc;
  border-left:15px solid #dcdcdc;
  border-bottom:5px solid #dcdcdc;
  background-color: white;
  font-family:sans-serif;
}
h1 {
  background-color:#dcdcdc;
  padding-top:10px;
  font-family:TAHOMA;
  text-align:center;
  padding-bottom:30px;

}
p{
  text-align:center;
  padding-top:0px;
  padding-bottom:8px;
}
img{
  margin:0 auto;
  display:flex;
  width:900px;
  border-radius:30px;
}

.box-1{
  
  background-color:#dcdcdc;
  padding: 5px 5px 5px 5px ;
   min-width: 100%; min-height: 100%; position: relative;
  height:60%;
  margin:20px 20px 20px 20px ;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 YaBrowser/23.1.2.939 Yowser/2.5 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

3

Hey! Could you please be a bit more specific about the problem that you’re facing.

4

image
image1873×949 20.8 KB

5

I was wrong, I’m talking about the right one

6

When I try to run your code in my browser, This is what I see. Is your problem related to this?

image
image1599×785 73.1 KB

If not, I would recommend you to copy/paste your code here so we can help you with your query.

7 
body{
 margin:0;
  border-top:30px solid #dcdcdc;
  border-right:15px solid #dcdcdc;
  border-left:15px solid #dcdcdc;
  border-bottom:5px solid #dcdcdc;
  background-color: white;
  font-family:sans-serif;
}
h1 {
  background-color:#dcdcdc;
  padding-top:10px;
  font-family:TAHOMA;
  text-align:center;
  padding-bottom:30px;

}
p{
  text-align:center;
  padding-top:0px;
  padding-bottom:8px;
}
img{
  margin:0 auto;
  display:flex;
  width:900px;
  border-radius:30px;
}

.box-1{
  
  background-color:#dcdcdc;
  padding: 5px 5px 5px 5px ;
   min-width: 100%; min-height: 100%; position: relative;
  height:60%;
  margin:20px 20px 20px 20px ;
}

Please compare my right and left side after the picture below, also pay attention to the lower right corner

8

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

9

the translator translates so poorly, and I can hardly understand you, I also have an English layout along with a Russian one, so it’s even harder to navigate with signs

10

so should i copy the code for you to view or what?

11

Just remove this line from your code and it should work fine.

This line is making your site overfow

  margin:20px 20px 20px 20px ;
1 Like
12

oh thanks and sorry for the inconvenience

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.