CSS дизайн выравнивания текста с показом более

Question

.read-more-state { 
 
    display: none; 
 
} 
 
.read-more-wrap { 
 
    width: 100%; 
 
} 
 
.read-more-target { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .5s ease; 
 
    width: 100%; 
 
} 
 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 
.read-more-state ~ .read-more-trigger:before { 
 
    content: 'Our Story'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    content: 'Close'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-trigger { 
 
    padding-left: 450px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    color: #666; 
 
    font-size: .9em; 
 
    line-height: 2; 
 
} 
 
.am-content-container { 
 
    max-width: 1100px; 
 
    margin: auto; 
 
} 
 
.hcentered { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.pure-g { 
 
    text-rendering: optimizespeed; 
 
    font-family: 'Roboto', sans-serif; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.pure-g > * { 
 
    box-sizing: border-box; 
 
} 
 
.pure-u { 
 
    zoom: 1; 
 
    display: inline-block; 
 
    word-spacing: normal; 
 
    letter-spacing: normal; 
 
    text-rendering: auto; 
 
    vertical-align: top; 
 
} 
 
.image-row { 
 
    margin-bottom: 0px; 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-sizer, .grid-item { 
 
     width: 16.67%; 
 
    } 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-item.col-2 { 
 
     width: 33%; 
 
    } 
 
} 
 
.bot { 
 
    margin: 0 10px 20px 10px; 
 
    pointer-events: all; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 
.text-justified { 
 
    color: #777; 
 
} 
 
h4 { 
 
    padding-left: 50px; 
 
    text-transform: none; 
 
    font-weight: 300; 
 
    line-height: 1.8em; 
 
    font-family: 'Roboto', sans-serif; 
 
    margin: 1.33em; 
 
    padding-bottom: 20px; 
 
}

<div class = "pure-g hcentered"> 
 
    <div class = "pure-u-1 pure-u-md-1-12"> 
 
    </div> 
 
    <div class = "pure-u-1 pure-u-md-5-6"></div> 
 
    <h4 class = "text-justified gray"> 
 
    <b>Molecular simulations simplified</b>. Macromoltek's mission is to provide easy-to-use scientific software. Our vision is to help researchers make new discoveries       by keeping the focus on their science. 
 
    <br> 
 
    <br> 
 
    <b>About our products:</b> 
 
    <br> 
 
    <br> 
 
    Macromoltek provides an Online Workspace for Antibody Analysis and Modeling. 
 
    We help researchers analyze potential antibody drug targets. We do this by providing users a web interface to our bioinformatics and molecular modeling software:       SmrtMol. 
 
    <input type="checkbox" class="read-more-state" id="post-2" /> 
 
    <ul class = "read-more-wrap"> 
 
     <p class = "read-more-target" style = "list-style: none;"> <br><br>Macromoltek was founded in fall of 2010 by Monica Berrondo (current CEO) to address the        growing need for easy-to-use antibody modeling software. After overcoming some roadblocks in getting started, she started development of a novel structure prediction      software package in spring of 2011. Shortly thereafter, Susana Kaufmann (current CFO) joined Macromoltek to help with the                 everyday operations and software development and testing. They worked tirelessly over the next 6 months to develop, test, and                benchmark an algorithm for predicting structures of antibody sequences. This website, www.macromoltek.com was launched at the end               of 2011 as the primary graphical user interface to all of Macromoltek's products and services.</p> 
 
    </ul> 
 
    <label for="post-2" class="read-more-trigger"></label> 
 
    </h4> 
 
</div>

Я не могу показаться, чтобы понять это, но у меня есть недостаток дизайна в моем коде, и это было мне пристанет.

Проблема

Когда я нажимаю показать еще пункт, это показывает текст, но не в выравнивании с предыдущим text.So, когда я нажимаю показать больше, он должен заполнить по ширине ул в h4, но он устанавливает свой собственный ящик и не имеет значения, что я делаю <p> с текстом внутри, не хочет наследовать ширину родительского элемента. Есть идеи?

Answer 1

попробовать это:

.read-more-wrap { 
    padding: 0; 
}