CODEWITHSUNDEEP
htmlcss
user3784927
user3784927

Reputation: 1

Why does my h2 not stay on a single line?

I'm having some trouble with css formatting. I want the h2 to be center and in a single line, but it doesn't do that for some reason. I've checked the obvious places, like the display attribute, but haven't found anything. I used normalize.css before applying my css. from index.html

    <div class = "input-area">  

    <div class = "input-wrapper">
    <h2>Pick <a href="http://en.wikipedia.org/wiki/Three">three</a> powers!</h2>
            </div>
            <div class = "options">
                <div class = "input-list first-list">
                <ul>
                <li><button type = "button" id = "choice 1"> </button></li>
                <li><button type = "button" id = "choice 2"> </button></li>
                <li><button type = "button" id = "choice 3"> </button></li>
                <li><button type = "button" id = "choice 4"> </button></li>
            <li><button type = "button" id = "choice 5"> </button></li>
            </ul>
            </div>
            <div class = "input-list">
            <ul>
            <li><button type = "button" id = "choice 6"> </button></li>
            <li><button type = "button" id = "choice 7"> </button></li>
            <li><button type = "button" id = "choice 8"> </button></li>
            <li><button type = "button" id = "choice 9"> </button></li>
            <li><button type = "button" id = "choice 10"> </button></li>
            </ul>
            </div>
        </div>

        <div class = "input-wrapper">
        <button type="button" onclick = "test()" id = "submit" >Test</button>
        </div>
    </div>

from style.css

   /*input */ 
.input-area
{
    margin:0;
    padding:0;
    background: #2dcc70;
}
.input-wrapper
{
    margin: 0px 50%;
    clear:both;
}
.options
{ 
    width: 100%;
    margin: 5px 0 5px 0;
}
.input-list
{
    display:inline;
    list-style: none;
    float:left;
    margin: 0 3% 0 3%;
}

I've tried a few options with the display attribute, but am all out of ideas... Also open to some critiquing

Upvotes: 0

Views: 394

Answers (1)

Eevee
Eevee

Reputation: 48536

.input-wrapper has left and right margins of 50%, which add to 100%. So there's no space left for the actual contents, and everything is getting squashed to as little space as possible.

I don't think you need margins there at all. If you want to center the text, just use:

.input-wrapper {
    text-align: center;
}

But then, I don't really understand why you have all these div wrappers around single elements:

h2 {
    text-align: center;
}

You could also add classes to the h2 or ul, or put the whole thing in a container, etc.

Upvotes: 2

Related Questions