$https://jsbin.com/huqukopixe/edit?html,output
大家好，这是练习的edX作业。在代码中，您将在横幅上看到边框。这边界不应该在那里。我试图利用它来强调社交媒体帐户的边界。但不幸的是，我无法让它变得更小。安迪建议？
谢谢alredy。
答案 0 :(得分：0)
我发现您的#media有border-style: solid，如果您将其删除，则白色边框消失，如果您删除padding-left: 1000px，您还会看到社交媒体图标。
答案 1 :(得分：0)
这是由border-style选择器上的#media引起的。调整你的CSS。
更改
#media {
padding-left: 1000px;
border-style: solid;
border-color: white;
position: relative;
}
到
#media {
padding-left: 1000px;
border-color: white;
position: relative;
}
https://jsbin.com/haxaluweme/1/edit?html,output
如果你想保留白色边框，只能保留社交媒体图标：
<!DOCTYPE html>
<html>
<head>
<!-- meta parts-->
<meta charset="utf-8">
<meta lang="en">
<meta name="keywords" content="recipe, content, webdesign, edx">
<meta name="viewport" content="width=device-width" , initial-scale=1.0p>
<meta name="author" content="Berkay MAKAS">
<title>Recipe Project Module-2 by Berkay Makas</title>
<style>
/* Css Parts. "Double Background color failure with text combination */
.textAll {
font-style: italic;
}
#headerone {
font-size: 70px;
background-color: cornflowerblue;
text-align: center;
color: white;
border: 3px solid black;
}
#copy {
background-image: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/music/colorful-fantasy-piano-keyboard-keys-web-header.jpg);
color: white;
background-repeat: no-repeat;
border: 2px solid black;
}
h3 {
color: crimson;
font-style: oblique;
}
h4 {
color: crimson;
}
#media {
float: right;
margin-right: 20px;
text-align: center;
border-style: solid;
width: 200px;
border-color: white;
position: relative;
}
#header #copy {
height: 119px;
}
</style>
</head>
<!-- End of CSS-->
<body class="textAll">
<header role="banner">
</header>
<!-- Header Part-->
<div id="header">
<div id="copy">
<p><b>Designed by Berkay Makas®</b></p>
<!-- Social Media -->
<div id="media">
<a href="https://www.instagram.com/brkymakas/" rel="author"><img src="http://pngimg.com/uploads/instagram/instagram_PNG10.png" alt="Instagram Logo" width="50" height="50"></a>
<a href="https://www.linkedin.com/in/berkay-makas-55014b126/?ppe=1" rel="author"><img src="http://www.imagespng.com/Data/Logo/Linkedin-Picture-180x180.png" width="55" height="55"></a>
</div>
</div>
<h1 id="headerone"><i>Recipes for lunch!</i></h1>
<nav>
<ul style="display: inline;"><a href="#firstone" style="text-decoration: none; padding: .2em 1em;">Chicken with Sourdough-Mushroom Stuffing</a></ul>
<ul style="display: inline"><a href="#secondone" style="text-decoration: none; padding: .2em 1em;">Blueberry-Sour Cream Dessert</a></ul>
<ul style="display: inline"><a href="#" style="text-decoration: none; padding: .2em 1em;">Main Page</a></ul>
</nav>
<hr>
<details>
<summary>READ ME!!! </summary>
<p>A brand new recipe paper per day to help you in order to overcome your thoughts on <b>"What the hell I am going to fo this day !</b>"</p>
</details>
<hr>
</div>
<!-- End of the header part-->
<!--Recipes Part -->
<article>
<header id="firstone">
<!-- First Recipe-->
<h3>Chicken with Sourdough-Mushroom Stuffing</h3>
<h4>Ingridients</h4>
<table>
<tr>
<td>Lemon Peel</td>
<td>2 tablespoons</td>
</tr>
<tr>
<td>Sage</td>
<td>1 Tablespoon</td>
</tr>
<tr>
<td>Salt</td>
<td>1 tablespoon</td>
</tr>
<tr>
<td>Grounded black pepper</td>
<td>1 1/2 teaspoons</td>
</tr>
<tr>
<td>Small chicken</td>
<td>8(5 pounds)</td>
</tr>
<tr>
<td>Butter</td>
<td>1/4 cups</td>
</tr>
<tr>
<td>Mushrooms</td>
<td>4 cups</td>
</tr>
<tr>
<td>Garlic</td>
<td>2 cloves</td>
</tr>
<tr>
<td>Baguette</td>
<td>10oz</td>
</tr>
<tr>
<td>Shredded carrot</td>
<td>1 cup</td>
</tr>
<tr>
<td>Chicken broth</td>
<td>1 cup</td>
<tr>
<td>Chopped wallnuts</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Italian parsley</td>
<td>3 tablespoons</td>
</tr>
</table>
</header>
<section>
<figure>
<img src="http://images.meredith.com/bhg/images/recipe/ss_R064439.jpg" height="250px" weight="250px" alt="Original photo of the food" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p> 1. Line a 5-1/2- to 6-quart slow cooker with a disposable cooker liner. Lightly coat liner with cooking spray; set aside. Reserve 1 teaspoon of the lemon peel. In a small bowl combine remaining lemon peel, sage, seasoned salt and pepper. Remove
3/4 of the mixture and rub onto chicken legs. Place chicken in slow cooker.<br> 2. Meanwhile, melt butter in a skillet; add mushrooms and garlic. Cook and stir 3 to 5 minutes or until just tender. Stir in remaining sage mixture. Transfer mushroom
mixture to a large bowl. Add bread cubes, and shredded carrot. Drizzle with chicken broth, tossing gently.<br> 3. Lightly pack stuffing on top of chicken. Cover and cook on high-heat setting for 4 to 5 hours.<br> 4. Transfer stuffing and chicken
to a platter.<br> 5. In a bowl combine reserved lemon peel, walnuts, and parsley; sprinkle over chicken. Makes 8 servings.</p>
</footer>
</section>
</article>
<!-- End of first recipe <article> -->
<hr>
<!-- HR lining to design.-->
<article>
<!-- Header Part-->
<header id="secondone">
<h3>Blueberry-Sour Cream Dessert</h3>
<h4>Ingredients</h4>
<table>
<tr>
<td>Dessert Crust</td>
<td>1 recipe</td>
</tr>
<tr>
<td>Fresh or frozen blueberries</td>
<td>3 cups</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/3 cup</td>
</tr>
<tr>
<td>Tapioka</td>
<td>3 tablespoons</td>
</tr>
<tr>
<td>Water</td>
<td>1/4 cup</td>
</tr>
<tr>
<td>Ground Cinnamon</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Lemon Peel</td>
<td>1 teaspoon</td>
</tr>
<tr>
<td>Ground Nutmeg</td>
<td>1/4</td>
</tr>
<tr>
<td>Egg yolks</td>
<td>3 units</td>
</tr>
<tr>
<td>Sugar</td>
<td>1/2 cup</td>
</tr>
<tr>
<td>Vanilla</td>
<td>1 teaspoon</td>
</tr>
</table>
</header>
<!-- Section part-->
<section>
<figure>
<img src="http://images.meredith.com/content/dam/bhg/Images/recipe/33/R090601.jpg.rendition.largest.jpg" alt="Blueberry cheesecake" height="250px" weight="250px" style="border-style: solid;">
<figcaption>Fig 1. The image of the food.</figcaption>
</figure>
<footer>
<h4>Directions</h4>
<p>
1. Prepare and bake Dessert Crust. Reduce oven temperature to 350 degrees F. In a medium saucepan, combine 3 cups blueberries, the 1/3 cup sugar, the tapioca, water, cinnamon, lemon peel, and nutmeg. Let stand for 15 minutes. Cook and stir mixture over
medium heat until blueberries become juicy and mixture is bubbly. Turn into partially baked Dessert Crust.<br> 2. In a medium mixing bowl, combine sour cream, egg yolks, the 1/2 cup sugar, and the vanilla. Pour evenly over blueberry
mixture.<br> 3. Bake about 50 minutes or until sour cream layer is set when gently shaken. Cool in pan on a wire rack for 1 hour. With a sharp knife, loosen crust from side of pan; remove side. Cover and chill overnight before serving.<br> 4.
To serve, if desired, garnish with additional blueberries. Makes 12 to 16 slices.</p>
</footer>
</section>
</article>
<hr>
<footer>
<nav>
<ul style="display: inline;"><a href="#firstone" style="text-decoration: none; padding: .2em 1em;">Chicken with Sourdough-Mushroom Stuffing</a></ul>
<ul style="display: inline"><a href="#secondone" style="text-decoration: none; padding: .2em 1em;">Blueberry-Sour Cream Dessert</a></ul>
<ul style="display: inline"><a href="#" style="text-decoration: none; padding: .2em 1em;">Main Page</a></ul>
</nav>
</footer>
</body>
</html>