Putting border around page with multi color?

HTML & CSS
2

The gray left and right borders simply look like the background of the body and certainly don’t need to be absolutely placed anyway (especially not as 4 separate empty elements).

All the borders could simply be based on the element itself as borders if needed.

I would do something like this.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	height:100%;
	margin:0;
	padding:0;
}
form{margin:0;}
body {
	background:#d0d0d0;
	padding:0 20px;
}
.container {
	height: 100%;
	width:100%;
	display:table;
	padding:0 30px;
	background:#fff;
	border-top:10px solid #894aa3;
	border-bottom:55px solid #444;
	position:relative;
}
.search {
	position:absolute;
	top:0;
	right:50px;
	width :218px;
	height:28px;
	border:none;
	background-color: #ebebea;
	border-radius:0 0 7px 7px;
}
/*
    plantagenet cherokee regular  
*/
.utopic-flowers {
	color : #666;
	margin:35px 0 1em;
}
</style>
</head>

<body>
<div class="container">
  <h1 class="utopic-flowers">Utopic Flowers</h1>
  <form><input type="text" name="search" class="search"></form>
  <p>Elit elit duis aute officia pariatur in. Dolore in eiusmod ex est minim consectetur. 
    Reprehenderit non eiusmod qui excepteur ullamco ipsum quis aliquip,Non sint enim.</p>
</div>
</body>
</html>

Remember to account for the default margins on the elements you use and don’t resort to negative margins just because you didn’t account for the margin on something properly. Take some time to learn the basics of css as these little errors will keep tripping you up along the way and become frustrating to you :slight_smile:

Here’s a few more hints for the header section.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	height:100%;
	margin:0;
	padding:0;
}
form {
	margin:0;
}
body {
	background:#d0d0d0;
	padding:0 20px;
}
.container {
	height: 100%;
	width:100%;
	max-width:1600px;
	margin:auto;
	display:table;
	background:#fff;
	border-top:10px solid #894aa3;
	border-bottom:55px solid #444;
	position:relative;
}
.search {
	position:absolute;
	top:0;
	right:50px;
	width :218px;
	height:28px;
	border:none;
	background-color: #ebebea;
	border-radius:0 0 7px 7px;
}
/*
    plantagenet cherokee regular  
*/
.utopic-flowers {
	color : #666;
	margin:0 10% 0 0;
	font-size:2rem;
}
.utopic-flowers span {
	display:block;
	font-size:1rem;
	font-weight:normal;
}
.header {
	padding:35px 30px;
	background:#fff;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.nav {
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex:1 0 0;
	justify-content:space-between;
	align-items:center;
}
.nav li {
	display:inline-block;
}
.nav a {
	text-decoration:none;
	text-transform:uppercase;
	color:#000;
	font-size:1rem;
}
.nav a:hover{color:#f00;}
.description {
	background:#eaeae8;
	padding:30px;
	margin:0;
	text-align:center;
	font-size:1.4rem;
	line-height:1.5;
}
@media screen and (max-width:1000px){
	.utopic-flowers{margin:0 0 1em;flex:1 0 100%;}
}
@media screen and (max-width:678px){
	.nav,.nav li, .nav a{display:block;padding:2px 0;}
}
</style>
</head>

<body>
<div class="container">
  <form>
    <input type="text" name="search" class="search">
  </form>
  <div class="header">
    <h1 class="utopic-flowers">Utopic Flowers<span>Free PSD website template</span></h1>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Style Demo</a></li>
      <li><a href="#">Full Width</a></li>
      <li><a href="#">Dropdown</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </div>
  <p class="description">Elit elit duis aute officia pariatur in. Dolore in eiusmod ex est minim consectetur. 
    Reprehenderit non eiusmod qui excepteur ullamco ipsum quis aliquip,Non sint enim.</p>
  <div class="slider"></div>
</div>
</body>
</html>