Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniel Jarvis
Daniel Jarvis
Courses Plus Student 1,410 Points

Text backgroung color problem!

Hi All,

i am currently trying to make 1 line of text on the page blue in background of it curved kind of like a button but it is not. my problem is that for all the trying i cannot stop the background color extending across the whole screen which is not what i want. any ideas to fix it would be much appreciated. codes are below.

here is the html for the page:

<!DOCTYPE HTML>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Under Maintenance!!!</title>
  <link rel="stylesheet" href="css/style.css" content="text/css" media="screen">
</head>

 <body class="container">
    <header></header>

    <h1>The website you are trying to access is currently</h1>

    <img src="img/under_maintenance.jpg">

    <p class="maintenance">Offline for maintenance</p>

    <p>Thank you for your patience during the time</p>

    <footer>Superhitmandan &copy 2014</footer>


 </body>

Here is the CSS code so far:

.container {
    border: 1px solid;
    background-color: #FFFFF2;
    font-family: sans-serif;
    font-size: 0.750em;
    padding-top: 25px;
}

h1 {
    text-align: center;
    vertical-align: center;
    font-weight: bold;

}

p[class="maintenance"] {
    background: #4FB69F no-repeat;
border-radius: 25px;
text-align: center;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Thanks in advance

3 Answers

Anthony Hind
Anthony Hind
5,715 Points

Something like this maybe? this

Daniel Jarvis
PLUS
Daniel Jarvis
Courses Plus Student 1,410 Points
Daniel Jarvis
Daniel Jarvis
Courses Plus Student 1,410 Points

exactly that. i tried changing the padding and margins but not to those specs. thank you very much :-).

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

No problem Daniel glad I could help!